.socials {display: flex;flex-direction: column;align-items: center;max-width: 1920px;margin: 0 auto;padding-bottom: 2.8125rem;width: 100%; } .socials .container {z-index: 1; } .socials .grid {display: grid;gap: 1rem;grid-template-columns: 1fr;grid-template-areas: "grid-item-1" "grid-item-2" "grid-item-3" "grid-item-4" "grid-item-5" "grid-item-6"; } @media (min-width: 576px) {.socials .grid {grid-template-columns: 1fr 1fr;grid-template-areas: "grid-item-1 grid-item-2" "grid-item-3 grid-item-2" "grid-item-4 grid-item-4" "grid-item-5 grid-item-6";} } @media (min-width: 768px) {.socials .grid {grid-template-columns: repeat(4, 1fr);grid-template-areas: "grid-item-1 grid-item-2 grid-item-3 grid-item-3" "grid-item-4 grid-item-2 grid-item-5 grid-item-6";} } .socials .grid .grid-item-1 {grid-area: grid-item-1;aspect-ratio: 4/3; } @media (min-width: 576px) {.socials .grid .grid-item-1 {aspect-ratio: 1/1;} } .socials .grid .grid-item-2 {grid-area: grid-item-2;aspect-ratio: 4/3; } @media (min-width: 576px) {.socials .grid .grid-item-2 {aspect-ratio: auto;} } .socials .grid .grid-item-3 {grid-area: grid-item-3;aspect-ratio: 4/3; } @media (min-width: 576px) {.socials .grid .grid-item-3 {aspect-ratio: 1/1;} } @media (min-width: 768px) {.socials .grid .grid-item-3 {aspect-ratio: auto;} } .socials .grid .grid-item-4 {grid-area: grid-item-4;aspect-ratio: 4/3; } @media (min-width: 576px) {.socials .grid .grid-item-4 {aspect-ratio: 2/1;} } @media (min-width: 768px) {.socials .grid .grid-item-4 {aspect-ratio: auto;} } .socials .grid .grid-item-5 {grid-area: grid-item-5;aspect-ratio: 4/3; } @media (min-width: 576px) {.socials .grid .grid-item-5 {aspect-ratio: 1/1;} } .socials .grid .grid-item-6 {grid-area: grid-item-6;aspect-ratio: 4/3; } @media (min-width: 576px) {.socials .grid .grid-item-6 {aspect-ratio: 1/1;} } .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(0);transition: transform 0.15s ease;padding: 1rem; } @media (min-width: 992px) {.socials .grid .card .card-body {transform: translateY(100%);} } .socials .grid .card .card-body .card-text {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin: 0; } .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); } .socials .grid .card:hover .card-text, .socials .grid .card:focus .card-text {color: var(--black); } .section.socials {position: relative; }