.section.highlightcards-container {
    background: var(--color-seashell);
    padding: 50px 0 60px;
    /* margin-top: 0 !important;
    margin-bottom: 0; */
}

/* Highlight Cards Component */
.highlightcards {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.highlightcards__card {
    position: relative;
    /* max-width: 270px; */
    max-width: 200px;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 0.5rem;
    flex-shrink: 0;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.05);
}

.highlightcards-container h1 {
    font-weight: 400;
    font-size: 32px;
}


.highlightcards__title {
    position: absolute;
    z-index: 2;
    padding: 14px;
}

.highlightcards__title p {
    margin: 0;
    font-family: var(--body-font-family-semibold);
    font-weight: 500;
    color: var(--color-red);
    font-size: 14px;
    line-height: 120%;
    padding-bottom: 65px;
}

.highlightcards__image {
    height: 100%;
}


.highlightcards__image source,
.highlightcards__image img {
    height: 100%;
}

.highlightcards__desc {
    position: absolute;
    left: 10px;
    z-index: 2;
    bottom: 0;
}

.highlightcards__desc p {
    font-size: 45px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    background: linear-gradient(24.77deg, #4e0004 14.08%, #8e0006 67.23%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-family: var(--body-font-family-bold);
}

.desktopview-wrapper .default-content-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.desktopview-wrapper .default-content-wrapper h1 {
    margin-top: 0;
    margin-bottom: 0;
}

.highlightcards-container .desktopview-wrapper {
    display: none;
}

@media (max-width: 1024px) {
    .highlightcards__card {
        /* max-width: 232px; */
        max-width: 180px;
    }
}

@media (max-width: 820px) {
  .highlightcards{
   flex-wrap: wrap;
}
}



/* Responsive layout */
@media (max-width: 767px) {
    .highlightcards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .highlightcards-container h1 {
        font-size: 24px;
    }

    .highlightcards__desc p {
        font-size: 35px;
    }

    .highlightcards__title {
        width: 100%;
        /* left: 20px;
        top: 18px; */
        z-index: 3;
        padding: 16px;
        padding-bottom: 65px;
    }


    .highlightcards__title p {
        font-size: 14px;
        line-height: 120%;
    }

    .highlightcards__image {
        width: 100%;
        bottom: -22px;
    }

    .highlightcards__card {
        min-width: 100%;
        min-height: 180px;
    }

    .highlightcards-container .button-container {
        margin-top: 10px;
        display: inline-block !important;
        position: absolute;
        bottom: 45px;
        left: 50%;
        width: 93%;
        transform: translateX(-50%);
    }

    .highlightcards-container .button-container a {
        width: 100%;

    }

    .section.highlightcards-container {
        background: rgba(254, 242, 237, 1);
        padding: 25px 0 140px;
        position: relative;
    }

    .section.highlightcards-container .columns-wrapper .columns>div {
        align-items: flex-start !important;
        padding: 0;
    }

    .section.highlightcards-container .columns-wrapper .columns>div>div {
        width: 100%;
    }

    .highlightcards-wrapper {
        padding-bottom: 20px !important;
    }
}


.desktopview-wrapper {
    display: flex;
    /* flex-direction: column; */
    /* align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem; */
    justify-content: space-between;
    margin-bottom: 56px !important;
}