.section.socials {width: 100%;margin: 0;padding: 48px 0;color: var(--white);background: var(--primary); } .section.socials > .container {width: calc(100% - 64px);max-width: 1452px;padding-right: 0;padding-left: 0; } .section.socials .socials-heading {display: flex;align-items: flex-end;justify-content: space-between;gap: 24px;margin-bottom: 24px; } .section.socials .socials-heading h1, .section.socials .socials-heading h2, .section.socials .socials-heading .h1, .section.socials .socials-heading .h2 {margin: 0;color: var(--white);font-family: "Sora", sans-serif;font-size: 36px;font-weight: 800;line-height: 1.2;text-transform: none; } .section.socials .socials-heading p {margin: 8px 0 0;color: var(--gray-500);font-size: 14px;line-height: 1.5; } .section.socials .social-links {display: flex;flex: 0 0 auto;gap: 8px; } .section.socials .social-link {display: grid;place-items: center;width: 48px;height: 48px;padding: 0;color: var(--white);background: var(--gray-900);border: 1px solid var(--gray-700);transition: border-color 0.2s ease, background-color 0.2s ease; } .section.socials .social-link svg, .section.socials .social-link .img-fluid {width: 20px;height: 20px;margin: 0; } .section.socials .social-link:hover, .section.socials .social-link:focus {color: var(--white);background: var(--gray-800);border-color: var(--secondary); } .section.socials .social-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 12px; } .section.socials .social-card {position: relative;display: block;aspect-ratio: 1;overflow: hidden;color: var(--white);background: var(--gray-900); } .section.socials .social-card > .social-card-image {display: block;width: 100%;height: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;transition: transform 0.7s ease; } .section.socials .social-card:hover > .social-card-image, .section.socials .social-card:focus > .social-card-image {transform: scale(1.05); } .section.socials .social-network {position: absolute;top: 16px;left: 16px;display: grid;place-items: center;width: 40px;height: 40px;color: var(--white);background: color-mix(in srgb, var(--primary) 65%, transparent);font-size: 11px;font-weight: 800;letter-spacing: 0.08em;backdrop-filter: blur(6px); } .section.socials .social-network svg {width: 20px;height: 20px; } .section.socials .social-card-content {position: absolute;right: 0;bottom: 0;left: 0;padding: 56px 24px 24px;color: var(--white);background: linear-gradient(to top, color-mix(in srgb, var(--primary) 98%, transparent), color-mix(in srgb, var(--primary) 82%, transparent) 55%, transparent);opacity: 0;transform: translateY(100%);transition: opacity 0.4s ease, transform 0.4s ease; } .section.socials .social-card:hover .social-card-content, .section.socials .social-card:focus .social-card-content {opacity: 1;transform: translateY(0); } .section.socials .social-meta {display: flex;align-items: baseline;gap: 8px;margin-bottom: 8px;font-size: 12px; } .section.socials .social-meta span {color: var(--gray-400);text-transform: capitalize; } .section.socials .social-text {display: -webkit-box;overflow: hidden;font-size: 14px;line-height: 1.5;-webkit-box-orient: vertical;-webkit-line-clamp: 3; } @media (max-width: 767.98px) {.section.socials .social-text {font-size: 1.2307692308rem;line-height: 1.6;} } @media (max-width: 991.98px) {.section.socials > .container {width: calc(100% - 32px);}.section.socials .social-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}.section.socials .social-card-content {opacity: 1;transform: none;} } @media (max-width: 575.98px) {.section.socials .socials-heading {align-items: flex-start;flex-direction: column;}.section.socials .social-grid {grid-template-columns: 1fr;} }