.section.images {width: 100%;max-width: 1920px;margin-left: auto;margin-right: auto;background: var(--white);padding-top: 2.1rem;padding-bottom: 8.5rem; } .section.images h1, .section.images .h1 {padding-top: 0; } .section.images .background {position: absolute;color: #d4d4d4;top: 3.8rem;left: 50%;transform: translateX(-50%); } .section.images .gallery {display: grid;grid-template-areas: "item-1" "item-2" "item-3" "item-4" "item-5" "item-6" "item-7" "item-8";gap: 0.6rem; } @media (min-width: 576px) {.section.images .gallery {grid-template-areas: "item-1 item-2" "item-1 item-3" "item-4 item-3" "item-5 item-6" "item-5 item-7" "item-8 item-7";} } @media (min-width: 768px) {.section.images .gallery {grid-template-areas: "item-1 item-2 item-3 item-4" "item-1 item-6 item-3 item-8" "item-5 item-6 item-7 item-8";} } .section.images .gallery .gallery-item {position: relative; } .section.images .gallery .gallery-item .card {border: 0;color: var(--white);width: 100%; } .section.images .gallery .gallery-item .card .card-img-top {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover; } .section.images .gallery .gallery-item .card .card-body {position: absolute;inset: 0;width: 100%;height: 100%;background: rgba(209, 135, 135, 0.71);color: var(--white);font-size: 0.8rem;padding: 1.5rem;display: flex;align-items: center;justify-content: center;overflow: clip;opacity: 0;visibility: hidden;transition: ease-in-out 0.25s visibility, ease-in-out 0.25s opacity; } .section.images .gallery .gallery-item .card:hover .card-body {opacity: 1;visibility: visible; } .section.images .gallery .gallery-item-1 {grid-area: item-1;aspect-ratio: 351/496; } .section.images .gallery .gallery-item-2 {grid-area: item-2;aspect-ratio: 351/351; } .section.images .gallery .gallery-item-3 {grid-area: item-3;aspect-ratio: 351/496; } .section.images .gallery .gallery-item-4 {grid-area: item-4;aspect-ratio: 351/351; } .section.images .gallery .gallery-item-5 {grid-area: item-5;aspect-ratio: 351/351; } .section.images .gallery .gallery-item-6 {grid-area: item-6;aspect-ratio: 351/496; } .section.images .gallery .gallery-item-7 {grid-area: item-7;aspect-ratio: 351/351; } .section.images .gallery .gallery-item-8 {grid-area: item-8;aspect-ratio: 351/496; }