.section.guides {width: 100%;margin: 0;padding: 44px 0 48px;background: var(--body-bg);text-align: left; } .section.guides > .container {width: calc(100% - 64px);max-width: 1452px;padding-right: 0;padding-left: 0; } .section.guides .guides-heading {display: flex;align-items: flex-end;justify-content: space-between;gap: 24px;margin-bottom: 24px; } .section.guides .guides-heading h1, .section.guides .guides-heading h2, .section.guides .guides-heading .h1, .section.guides .guides-heading .h2 {margin: 0;color: var(--primary);font-family: "Sora", sans-serif;font-size: 36px;font-style: normal;font-weight: 800;line-height: 1.2;text-align: left;text-transform: none; } .section.guides .guides-heading p {margin: 8px 0 0;color: var(--gray-600);font-size: 14px;line-height: 1.5; } .section.guides .guides-controls {display: flex;flex: 0 0 auto;gap: 8px; } .section.guides .guides-controls .btn {display: grid;place-items: center;position: static;width: 44px;height: 44px;padding: 0;color: var(--primary);background: var(--white);border: 1px solid var(--gray-300);border-radius: 0;transform: none; } .section.guides .guides-controls .btn svg {width: 16px;height: 16px; } .section.guides .guides-controls .btn:hover, .section.guides .guides-controls .btn:focus {color: var(--primary);background: var(--secondary);border-color: var(--secondary); } .section.guides .guides-carousel .holder {overflow: hidden; } .section.guides .guides-carousel .slider {flex-wrap: nowrap;margin-right: -6px;margin-left: -6px; } .section.guides .guides-carousel .slide {flex: 0 0 25%;max-width: 25%;padding-right: 6px;padding-left: 6px; } .section.guides .guides-carousel .card {position: relative;display: grid;grid-template-columns: minmax(0, 1fr) auto;grid-template-rows: auto 1fr;gap: 30px 16px;min-height: 126px;padding: 26px 24px 22px;color: var(--primary);background: var(--white);border: 1px solid var(--gray-300);border-radius: 0;transition: background-color 0.2s ease, border-color 0.2s ease; } .section.guides .guides-carousel .card:hover, .section.guides .guides-carousel .card:focus {color: var(--primary);background: var(--secondary);border-color: var(--secondary); } .section.guides .guides-carousel .slide:first-child .card {color: var(--primary);background: var(--secondary);border-color: var(--secondary); } .section.guides .guides-carousel .card-title {margin: 0;font-family: "Sora", sans-serif;font-size: 18px;font-weight: 700;line-height: 1.25;text-transform: none;text-align: left; } .section.guides .guides-carousel .card-arrow {font-size: 24px;line-height: 1; } .section.guides .guides-carousel .card-text {grid-column: 1/-1;align-self: end;margin: 0;overflow: hidden;color: var(--gray-600);font-size: 12px;letter-spacing: 0.1em;line-height: 1.4;text-transform: uppercase;white-space: nowrap;text-overflow: ellipsis;text-align: left; } @media (max-width: 991.98px) {.section.guides > .container {width: calc(100% - 32px);}.section.guides .guides-carousel .slide {flex-basis: 50%;max-width: 50%;} } @media (max-width: 575.98px) {.section.guides .guides-heading {align-items: flex-start;}.section.guides .guides-carousel .slide {flex-basis: 88%;max-width: 88%;} }