.socials {display: flex;flex-direction: column;align-items: center;max-width: 1920px;margin: 0 auto;background: #faf5ec;padding-top: 4.75rem;padding-bottom: 5.9375rem; } .socials .container {z-index: 1; } .socials .grid {display: grid;gap: 0;grid-template-areas: "grid-item-1" "grid-item-2" "grid-item-3" "grid-item-4" "grid-item-5"; } .socials .grid > * {padding: 0.3125rem; } @media (min-width: 576px) {.socials .grid {grid-template-areas: "grid-item-1 grid-item-2" "grid-item-1 grid-item-2" "grid-item-1 grid-item-4" "grid-item-3 grid-item-4" "grid-item-3 grid-item-4" "grid-item-5 grid-item-5" "grid-item-5 grid-item-5" "grid-item-5 grid-item-5";} } @media (min-width: 768px) {.socials .grid {grid-template-areas: "grid-item-1 grid-item-2 grid-item-3" "grid-item-1 grid-item-2 grid-item-3" "grid-item-4 grid-item-2 grid-item-3" "grid-item-4 grid-item-2 grid-item-5" "grid-item-4 grid-item-2 grid-item-5";} } .socials .grid .grid-item-1 {grid-area: grid-item-1;aspect-ratio: 1/1; } @media (min-width: 576px) {.socials .grid .grid-item-1 {aspect-ratio: 3/3;} } @media (min-width: 768px) {.socials .grid .grid-item-1 {aspect-ratio: 458/326;} } .socials .grid .grid-item-2 {grid-area: grid-item-2;aspect-ratio: 1/1; } @media (min-width: 576px) {.socials .grid .grid-item-2 {aspect-ratio: 3/2;} } @media (min-width: 768px) {.socials .grid .grid-item-2 {aspect-ratio: 458/819;} } .socials .grid .grid-item-3 {grid-area: grid-item-3;aspect-ratio: 1/1; } @media (min-width: 576px) {.socials .grid .grid-item-3 {aspect-ratio: 3/2;} } @media (min-width: 768px) {.socials .grid .grid-item-3 {aspect-ratio: 458/493;} } .socials .grid .grid-item-4 {grid-area: grid-item-4;aspect-ratio: 1/1; } @media (min-width: 576px) {.socials .grid .grid-item-4 {aspect-ratio: 3/3;} } @media (min-width: 768px) {.socials .grid .grid-item-4 {aspect-ratio: 458/493;} } .socials .grid .grid-item-5 {grid-area: grid-item-5;aspect-ratio: 1/1; } @media (min-width: 576px) {.socials .grid .grid-item-5 {aspect-ratio: 6/3;} } @media (min-width: 768px) {.socials .grid .grid-item-5 {aspect-ratio: 458/326;} } .socials .grid .card {height: 100%;position: relative;overflow: hidden;color: var(--body-color);border: 0; } .socials .grid .card .card-img-top {position: absolute;width: 100%;height: 100%;top: 0;left: 0;object-fit: cover; } .socials .grid .card svg {z-index: 1;color: white;position: absolute;width: 1.875rem;height: auto;right: 0.5rem;top: 0.5rem; } .socials .grid .card .card-body {width: 100%;position: absolute;bottom: 0;background: rgba(255, 255, 255, 0.9);transform: translateY(100%);transition: transform 0.15s ease; } .socials .grid .card .card-body .card-text {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; } .socials .grid .card:hover .mdi, .socials .grid .card:focus .mdi {opacity: 1; } .socials .grid .card:hover .card-body, .socials .grid .card:focus .card-body {transform: translateY(0); } .section.socials {position: relative; }