@media screen and (min-width: 1550px) {
    html {
        scroll-behavior: smooth;
    }
    
    .body_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 350px 50px max-content max-content;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    
    /*HEADER START*/
    header {
        grid-column: 1/4;
        grid-row: 1;
        display: flex;
        border-bottom: 2px solid red;
        height: 350px;
        margin-left: 15%;
    }
    
    .header--logo {
        width: 550px;
        height: auto;
        margin: auto;
        margin-top: 80px;
        margin-bottom: 20px;
    }
    
    .header--photo {
        grid-column: 2/4;
        grid-row: 1/3;
        justify-self: end;
        width: 80%;
        height: auto;
        border-bottom-left-radius: 80%;
    }
    /*HEADER END*/
    
    /*NAV START*/
    nav {
        grid-column: 1/4;
        grid-row: 2;
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 550px;
        margin-left: 15%;
        gap: 5%;
    }
    
    nav > a {
        align-self: center;
    }
    
    nav > a:hover {
        text-decoration: underline;
        color: black;
    }
    
    /*NAV END*/
    /*MAIN START*/
    main {
        grid-column: 1/4;
        grid-row: 3;
        display: flex;
        flex-direction: column;
    }
    
    main > h2 {
        margin: 20px 0 0 15%;
        padding: 5px 25px 0 25px;
        border-bottom: 1px solid red;
        width: min-content;
    }
    section > h3 {
        margin-left: 15%;
        margin-right: 40%;
        margin-top: 20px;
    }
    
    section > div {
        padding: 5px 0;
        max-width: 68.5%;
        width:  fit-content;
    }
    
    .gallery--section {
        background-color: rgb(249, 249, 249);
        padding-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .gallery--section>button {
        font-size: 20px;
        padding: 20px 30px;
        margin-top: 20px;
        cursor: pointer;
        transition: 0.3s;
        border: none;
        background-color: rgb(195, 195, 195);
        border-radius: 20px;
    }
    
    .gallery--section>button:hover {
        color: white;
        background-color: red;
    }
    
    .gallery--article {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 20px;
        margin: 30px 15% 0 15%;
    }
    
    .gallery--img {
        display: none;
        flex-grow: 1;
        max-width: 24%;
        border-radius: 10px;
        box-shadow: 1px 2px 5px rgb(154, 77, 77);
        cursor: pointer;
        transition: 0.3s;
    }
    
    .gallery--img:hover {
        box-shadow: 1px 5px 10px rgb(110, 29, 29);
    }
    /*MAIN END*/
    /*IMG WINDOW START*/
    .container {
        
        display: none;
        grid-template-columns: 8% 84% 8%;
        grid-template-rows: repeat(2, min-content);
        opacity: 0;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    
    .img__window {
        display: none;
        border-radius: 10px;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }
    
    .current__img {
        display: block;
    }
    
    .container button {
        display: none;
        background-color: rgba(0, 0, 0, 0.15);
        color: white;
        font-size: 70px;
        border: none;
        cursor: pointer;
        transition: 0.5s;
    }
    
    .left {
        grid-column: 1;
        grid-row: 2;
        border-bottom-left-radius: 10px;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    
    .left:hover {
        background-color: rgba(88, 88, 88, 0.472);
    }
    
    .left:active {
        background-color: rgba(143, 143, 143, 0.834);
    }
    
    .right {
        grid-column: 3;
        grid-row: 2;
        border-bottom-right-radius: 10px;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    
    .right:hover {
        background-color: rgba(88, 88, 88, 0.472);
    }
    
    .right:active {
        background-color: rgba(143, 143, 143, 0.834);
    }
    
    
    .exit__div {
        display: none;
        grid-column: 1/4;
        grid-row: 1;
        background-color: rgb(53, 53, 53);
        margin-bottom: -1px;
        border-radius: 10px 10px 0 0;
        height: 40px;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    
    .exit {
        display: block !important;
        align-self: center;
        width: 8%;
        font-size: 30px !important;
        border-top-left-radius: 10px;
    }   
    
    .exit:hover {
        background-color: rgb(138, 138, 138) !important;
    }
    
    .container>p {
        display: none;
        background-color: rgba(0, 0, 0, 0.15);
        color: white;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -120%);
        transition: 0.3s;
        padding: 5px;
        border-radius: 5px;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    
    .container>p:hover {
        background-color: rgba(88, 88, 88, 0.472);
    }
    /*IMG WINDOW END*/
    /*FOOTER START*/
    
    
    footer > h2 {
        grid-row: 1;
        grid-column: 1/7;
        margin: 10px 0 0 15%;
        padding: 5px 25px 0 25px;
        border-bottom: 1px solid red;
        width: min-content;
    }
    
    .footer_map {
        height: 300px;
    }

    
    /*FOOTER END*/
}