:root {
    --font-family-primary: 'Open Sans', sans-serif;
    --font-family-secondary: 'Open Sans', sans-serif;
}

.header {
    &.adjusted-top {
        top: var(--top-value);
    }
    &.adjusted-top.fixed-header-shrink {
        top: 0;
    }
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(0 0 0 / 40%)
}

.hero-slider {
    width: 100%;
    height: 670px;
    overflow: hidden;
    -webkit-transition: transform 0.4s; /* Safari */
    -moz-transition: transform 0.4s;    /* Firefox */
    -o-transition: transform 0.4s;      /* Opera */
    transition: transform 0.4s;
    &.sidenav-menu-is-open {
        transform: translateX(-260px);
    }

    .carousel-cell {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        .inner {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            text-align: center;
            padding-inline: 80px;

            .subtitle {
                font-family: var(--font-family-secondary);
                font-size: clamp(2.5rem, 1.449vw + 2.036rem, 3.52rem);
                line-height: 1.2em;
                font-weight: 200;
                letter-spacing: 3px;
                color: rgba(255, 255, 255);
                margin-bottom: 5px;
            }

            .title {
                font-family: var(--font-family-primary);
                font-size: clamp(3rem, 2.557vw + 2.182rem, 4.8rem);
                font-weight: 600;
                line-height: 1.2em;
                text-transform: uppercase;
                letter-spacing: 3px;
                margin-bottom: 40px;
                padding: 0;
            }

            .btn.btn-primary {
                padding: 14px 18px;
                text-transform: uppercase;
                font-family: var(--font-family-primary);
                font-size: 1.4rem;
                letter-spacing: 3px;
                transition: all .4s ease;
                box-shadow: none;

                &:hover {
                    background: #fff;
                    color: #000;
                }
            }
        }
    }

    .flickity-prev-next-button {
        width: 80px;
        height: 80px;
        background: transparent;

        &:hover {
            background: transparent;
        }

        .arrow {
            fill: white;
        }
    }

    .flickity-page-dots {
        bottom: 30px;

        .dot {
            width: 30px;
            height: 4px;
            opacity: 1;
            background: rgba(255, 255, 255, 0.5);
            border: 0 solid white;
            border-radius: 0;

            &.is-selected {
                background: #ff0000;
                border: 0 solid #ff0000;
            }
        }
    }
}

.cat-card {
    .card {
        position: relative;
        overflow: hidden;

        &:hover .cat-card__img {
            -webkit-transform: scale(1.04);
            -ms-transform: scale(1.04);
            -moz-transform: scale(1.04);
            transform: scale(1.04);
            -webkit-filter: brightness(110%);
            -moz-filter: brightness(110%);
            filter: brightness(110%);
        }

        &:focus-within {
            outline: 1px dashed #da1e48;

            :focus {
                outline: none;
                box-shadow: none;
                background-color: #da1e48;
            }
        }
    }

    * {
        transition: all .4s ease;
    }

    .cat-card__img-wrapper {
        overflow: hidden;
        margin-bottom: 20px;
    }

    .cat-card__description {
        flex-grow: 1;
    }

    .cat-card__link {
        padding-inline: 0;
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
        }
    }
}