/*-----SLIDESHOW (DESKTOP)-----*/
.slideshow-container {
    display: flex;
    background-color: #000;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    aspect-ratio: 2/1;
    height: auto;
    margin-bottom: 4rem;
    padding-top: 0.8rem;
    }

.slideshow {
    width: 100%;
    height: 100%;
    position: relative;
    }

.slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2.5s ease-out;
    }

.slideshow img.active {
    opacity: 1;
    }

.black-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 1;
    z-index: 10;
            }
/*----SLIDESHOW END--(DESKTOP)----*/

/*------MAIN GRID--(DESKTOP)------*/ 
.reader-icon-container-main-page {
    width: 3.2rem;
    height: 4.2rem;
    top: 1.7rem;
    left: 49.6rem;
    display: flex;
    align-content: center;
    justify-content: center;
    position: absolute;
    }

.grid-container-1, .grid-container-2,
.grid-container-3, .grid-container-4,
.grid-container-5 {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    }

.grid-container-1 {
    grid-template-areas:
    "photo1 text1 text1 photo2 photo2";
    margin-bottom: clamp(5px, 4vw, 58px);
    }
        
.grid-container-2 {
    grid-template-areas:
    "photo3 photo3 text2 text2 photo4";
    margin-top: 2.5rem;
    margin-bottom: 4rem;
    }
        
.grid-container-3 {
    grid-template-areas:
    "photo6 photo7 text3 text3 photo5";
    margin-top: 2.5rem;
    margin-bottom: 4rem;
    }
        
.grid-container-4 {
    grid-template-areas:
    "photo9 photo10 text4 text4 photo8";
    margin-top: 2.5rem;
    margin-bottom: 4rem;
    }

.grid-container-5 {
    grid-template-areas:
    "photo11 photo12 text5 text5 photo13";
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    }
        
.text1intro { grid-area: text1; }
.text2intro { grid-area: text2; }
.text3intro { grid-area: text3; }
.text4intro { grid-area: text4; }
.text5intro { grid-area: text5; }
        
.text1intro .initial {
    float: left; 
    width: 21%; 
    margin-right: 1.5rem;
    margin-bottom: 0;
    aspect-ratio: 1/1;
    background-color: #7F6327;
    }

.text1intro p, .text2intro p, .text3intro p, 
.text4intro p, .text5intro p {   
    font-family: "Times New Roman", Times, serif;
    font-size: 1.37rem;
    color: #6f6f6f;
    line-height: 1.68;
    margin: -0.5rem 0;
    text-align: left;
    }
        
.photo1 { grid-area: photo1; }
.photo2 { grid-area: photo2; }
.photo3 { grid-area: photo3; }
.photo4 { grid-area: photo4; }
.photo5 { grid-area: photo5; }
.photo6 { grid-area: photo6; }
.photo7 { grid-area: photo7; }
.photo8 { grid-area: photo8; }
.photo9 { grid-area: photo9; }
.photo10 { grid-area: photo10; }
.photo11 { grid-area: photo11; }
.photo12 { grid-area: photo12; }
.photo13 { grid-area: photo13; }
        
.photo1, .photo2, .photo3, .photo4, .photo5, 
.photo6, .photo7, .photo8, .photo9, .photo10,
.photo11, .photo12, .photo13 {
    display: flex;
    flex-direction: column;
    gap: 1.7rem;            
    }
        
.photo1-item img, .photo2-item img, 
.photo3-item img, .photo4-item img,
.photo5-item img, .photo6-item img,
.photo7-item img, .photo8-item img,
.photo9-item img, .photo10-item img,
.photo11-item img, .photo12-item img,
.photo13-item img {
    width: 100%; 
    object-fit: cover; 
    }
        
.heading {
    font-family: 'CormorantGaramond', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    line-height: 1.2;
    font-size: 2.7rem;
    color: #7e620b;
    margin-top: -0.7rem;
    margin-bottom: 0.5rem;
    }
        
/*=======MEDIA QUERIES TABLET=======*/
/*=======MEDIA QUERIES TABLET=======*/
@media (max-width: 991px) {
    
}

/*=======MEDIA QUERIES MOBILE=======*/
/*=======MEDIA QUERIES MOBILE=======*/
@media (max-width: 768px) {

/*----SLIDESHOW CONTAINER--(MOBILE)----*/
.slideshow-container {
    display: flex;
    justify-items: center;
    align-items: center;
    aspect-ratio: 5/3;
    margin-top: 10vw;
    margin-bottom: 10vw;
    }
/*----SLIDESHOW CONTAINER END--(MOBILE)----*/
            
.gray-line-2 { margin-bottom: 9vw;}
.gray-line-3 { display: none;}

.reader-icon { 
    display: none;
    }
            
.grid-container-1, .grid-container-2, 
.grid-container-3, .grid-container-4,
.grid-container-5 {
    display: flex;
    flex-direction: column;
    } 
            
.text1intro { order: 0; }
.photo2 { order: 1; }
.photo1 { order: 2; }
.text2intro  { order: 3; }
.photo3 { order: 4; }
.photo4 { order: 5; }
.text3intro { order: 6; }
.photo5 { order: 7; }
.photo7 { order: 8; }
.text4intro { order: 9; }
.photo9 { order: 10; }
.photo10 { order: 11; }
.text5intro { order: 12;}
    
.photo11 {
    display: flex;
    flex-direction: row;
    order: 13; 
    gap: 4vw;
    margin-bottom: 1vw;
    padding: 0 5vw;
    margin-top: 7vw;
    }
    
.photo12 {
    display: flex;
    flex-direction: row;
    order: 14;
    gap: 4vw;
    padding: 0 5vw;
    margin-bottom: 12vw;
    }
            
.photo3-item:nth-child(2) {
    display: none; 
    }
    
.photo6 { display: none; }
.photo8 { display: none; }
.photo13 { display: none; }
            
.text1intro, .text2intro, .text3intro, 
.text4intro , .text5intro  {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background-color: #fff;
    padding: 5vw;
    }

.text1intro p, .text2intro p, .text3intro p, 
.text4intro p, .text5intro p {
    font-size: 5vw; 
    }
            
.text1intro .initial {
    float: left; 
    width: 16vw; 
    margin-right: 4.5vw;
    margin-bottom: 0;
    aspect-ratio: 1/1;
    background-color: #7F6327;
    margin-top: 1.5vw;
    }
            
.heading {
    font-size: 9vw;
    font-weight: 500;
    margin-top: -0.7vw;
    margin-bottom: 0.9vw;
    }
            
.photo2, .photo3 {
    display: flex;
    flex-direction: column;
    padding: 0 5vw;
    gap: 3vw;
    }
     
.photo1, .photo4, .photo5, .photo7, .photo9, .photo10 {
    display: flex;
    flex-direction: row;
    gap: 4vw;
    padding: 0 5vw;
    }
            
.photo1 {
    padding-top: 6vw; 
    padding-bottom: 6vw;}
    
.photo2{ 
    border-bottom: 1px solid #393939; 
    padding-bottom: 7vw; 
    padding-top: 7vw; 
    }
    
.photo3, .photo5, .photo9 {
    padding-top: 7vw;
    }
    
.photo4, .photo7  {
    padding-bottom: 6vw; 
    padding-top: 1vw;
    }
    
.photo10 {
    padding-bottom: 7vw; 
    padding-top: 1vw;
    }
            
.photo1-item img {
    width: 100%; 
    object-fit: cover; 
    aspect-ratio: 1 / 1;
    }
            
.photo1-item, .photo4-item, .photo5-item, 
.photo7-item, .photo9-item, .photo10-item, 
.photo11-item, .photo12-item, .photo13-item { 
    flex: 1; 
    }
 
/*-------MAIN GRID END-------*/
}