.socials {padding: 3.5714285714rem 0; } .socials h1 {text-align: center;text-transform: uppercase; } .socials .row {padding: 1.0714285714rem; } .socials .row > * {margin-bottom: 1.1428571429rem; } .socials .row .card {aspect-ratio: 1/1;position: relative;padding: 0;border: 0;box-shadow: none;overflow: hidden; } .socials .row .card:hover .card-body {bottom: 0;transition: bottom 0.5s; } .socials .row .card:hover .card-img-top {transform: scale(1.1);transition: transform 0.5s; } .socials .row .card .card-img-top {position: absolute;width: 100%;height: 100%;top: 0;left: 0;object-fit: cover;transition: all 0.5s; } .socials .row .card svg {position: absolute;top: 1.0714285714rem;right: 1.0714285714rem;color: var(--white);width: 2.5714285714rem;height: auto; } .socials .row .card .card-body {padding: 1.0714285714rem;background: transparent;position: absolute;bottom: -22.8571428571rem;left: 0;transition: bottom 0.5s; } .socials .row .card .card-body .card-content {background: var(--color3);width: 100%;padding: 1.0714285714rem; } .socials .row .card .card-body .card-title {color: var(--white);font-size: 1.5714285714rem; } .socials .row .card .card-body .card-text {color: var(--white); }