.socials {display: flex;flex-direction: column;align-items: center;max-width: 1920px;margin: 0 auto;padding-bottom: 4.6875rem;background: var(--secondary); } .socials h1, .socials .h1 {color: var(--primary); } .socials .container {z-index: 1; } .socials .card {aspect-ratio: 1/1;position: relative;overflow: hidden;color: var(--body-color);border: 0; } .socials .card .card-img {position: absolute;width: 100%;height: 100%;top: 0;left: 0;object-fit: cover; } .socials .card .card-img .img-fluid {object-fit: cover;width: 100%;height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0; } .socials .card svg {z-index: 1;color: var(--black);width: 1.875rem;height: auto;margin-bottom: 0.625rem; } .socials .card .card-body {width: calc(100% - 3.125rem);margin: 1.5625rem;position: absolute;bottom: 0;background: var(--primary);color: var(--black);opacity: 0;transition-duration: 0.1s;transition-property: opacity; } .socials .card .card-body .card-text {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; } .socials .card:hover .card-body, .socials .card:focus .card-body {opacity: 1; } .section.socials {position: relative; }