.autogrid {
    display: grid;
    /* put just 1 fr if we want fullscreen; this makes a max width for elements*/
    /* or just get rid of this outer grid alltogeher - maybe it complicates things */
    grid-template-columns: 1fr minmax(1000px,1440px) 1fr;
    grid-template-rows: auto;
    grid-row-gap: 64px;
    padding-top: 4rem;
    padding-bottom: 64px;
    grid-auto-flow:row ;

}

.sub-autogrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* make grid template columns a new class for 2,3,4 etc. that go to 1 in mobile */
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-auto-flow:row ;
    grid-column:span 1;
    grid-column-start: 2;

}

/* should these be named more like the museum's? */

.four-wide {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.three-wide {
    grid-template-columns: 1fr 1fr 1fr;
}

.two-wide {
    grid-template-columns: 1fr 1fr;
}

.one-wide {
    grid-template-columns: 1fr;
}

.solo {
    grid-column-start: 2;
}

@media (max-width: 724px) {
    .autogrid {
    display: grid;
    grid-template-columns: 0fr;
    grid-row-gap: 32px;
    }

    .sub-autogrid {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 0px;
        
    }

    .four-wide {
        grid-column-gap: 24px;
        grid-template-columns: 1fr 1fr;
    }

    .three-wide {
        grid-column-gap: 0px;
        grid-template-columns: 1fr;
    }

    .two-wide {
        grid-column-gap: 0px;
        grid-template-columns: 1fr;

    }
    #auxiliary{
        
        
        padding-top: 48px;
    }
    .solo {
        grid-column-start: 1;
    }

}

@media screen and (max-width: 1024px) and (min-width: 725px) {
    .autogrid {
        display: grid;
        grid-template-columns: 1fr;
        grid-row-gap: 32px;
    }

    .sub-autogrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .one-wide {
        grid-template-columns: 1fr;
    }

    .three-wide {

        grid-template-columns: 1fr 1fr;
    } 

    .four-wide {
        grid-template-columns: 1fr 1fr 1fr; 
    }

    /*Investigate why this needs to be included...*/
    #auxiliary{
        grid-template-columns: max-content;
    }
    .solo {
        grid-column-start: 1;
    }
    
}

@media screen and (max-width:1200px) and (min-width: 725px) {

    .three-wide-alt {

        grid-template-columns: 1fr 1fr;
    }

}

#auxiliary{
        grid-row-gap: 2rem;
        margin-bottom: 4rem;
}

.grid-element {
    grid-column: auto;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;  
}

.grid-element h3, h4 {
    padding: 1em;
}

.autogrid-title{
    
    font-size: x-large;
    grid-column-start: 2;
    color: var(--white);
    
}

.intro {
    grid-row-gap: 24px;
    grid-template-columns: 1fr 1fr 1fr;
    color: var(--white);
}

.timeline {
    grid-row-gap: 0px; 
    grid-template-columns:1fr; 
    color: var(--white);
}

.exhibition-image {
    grid-column: span 2;
    background-position: top !important;
background-repeat: no-repeat !important;
background-size: auto 100% !important;
min-height: fit-content;
min-height: 400px;
background-color: black !important;
}

@media screen and (min-width: 725px) and  (max-width: 1024px) {
    .intro {
        grid-template-columns:1fr;
        grid-column-gap: 0px;
        grid-row-gap: 24px;
        padding-bottom: 2rem;
        
    }

    #events a:first-child {
        grid-column-start: 1!important;
    }

    .exhibition-image {
        grid-column: span 1;

    }
}

@media (max-width: 724px) {
    .intro {
        grid-template-columns:1fr; 
        grid-row-gap: 24px;
        padding-bottom: 2rem;
    }
}

.shop-item{
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0rem 0rem 1rem 0rem;
    
}

.shop-title{
    padding: 4rem;
}


.shop-image{
    width:100%;
    max-height: 300px;
    object-fit: cover;
}

.shop-container{
    background: var(--white); 
    padding: 0rem 2rem 1rem 2rem;
    grid-column-gap: 2rem;
    grid-row-gap: 0rem;
}

.shop-image-link{
    width: 100%;
}

.shop-cta{
    grid-column: 1/-1;
    padding-top: 2rem;
    padding-bottom: 0rem;
}

@media (max-width: 724px) {
    .shop-container {
        padding: 0rem;
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    .shop-item{
        padding:0rem 1rem 2rem 1rem;
    }

    .shop-cta{
        padding-bottom: 1rem;
    }
  }

  .max-width {
    padding:4rem;
    padding-bottom: 0rem;
}


@media screen and (max-width: 724px) {
    .max-width {
        padding-left: 4rem; padding-right: 4rem;
        max-width: 100%;
    }
    .publication{
        grid-template-columns: 1fr;
        background-color: var(--bg-theme-colour);
        grid-gap: 0rem;
    }

    .publication > a {
        padding-left: 3rem;
        padding-bottom: 3rem;
    }
}

.subtitle.credit {
    padding: 1rem;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-bottom: 0rem;
}

.span {
    grid-column: span 2; 
}

.sub {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

@media screen and (max-width: 1024px) {
    .span {
        grid-column: span 1;      
    }

    .sub {
        grid-template-columns: 1fr;
grid-column-gap: 0rem;
grid-row-gap: 0rem;
        
    }
}

@media screen and (min-width: 1024px) {
    .start-2 {
        grid-column-start: 2;      
    }
    
}