.archive-container {
   padding-top: 200px;
   padding-bottom: 200px;
   background: linear-gradient(180deg, rgba(26, 35, 44, 0) 92.04%, #1A232C 100%), linear-gradient(97.85deg, rgba(26, 35, 44, 0.1) 24.12%, #1A232C 91.36%);
   margin-bottom: 2rem;
}
.archive-carousel .flickity-viewport .flickity-slider{
    display: flex;
    align-items: center;
}
.archive-container .archive-row {
    margin-left: 1%;
    display: flex;
    justify-content: space-between;
    color: white !important;
}
.archive-container .archive-row .section-title {
    color: white !important;
}

.archive-carousel .flickity-viewport {
  height: 420px !important; 
} 
.archive-carousel {
    padding: 20px 80px;
}

.carousel-cell-archive {
    width: 34% !important;
    height:360px;
    margin: 0 !important;
    border-radius: 17px;
    padding: 0px 10px !important;
}

.carousel-cell.carousel-cell-archive.is-selected {
    height: 410px !important;
    z-index: 2;
}

.carousel-cell.carousel-cell-archive.is-selected .archive-image{
    position: absolute;
     width: 140% !important;
     inset-inline-start: -20px;
     border: 1px solid var(--btn-primary);
}

.archive-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 17px;
}

.archive-carousel .flickity-button {
    background-color: transparent;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--primary-color);
    font-size: 24px;
    border: 1px solid #D2D6DB33;
}
.archive-carousel .flickity-button-icon {
    height: 40% !important;
    width: 40% !important;
    left: 30% !important;
    top: 30% !important;
}


.flickity-button:hover .flickity-button-icon{
    fill: #333;
}

.flickity-button:hover .archive-carousel .flickity-button{
    background-color: #e9e7e7 !important;
}

.section-button-archive {
    background-color: var(--btn-primary);
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    text-decoration: none;
}
.decor-1{
    position: absolute;
    width: 150px;
    inset-inline-end: 10%;
    top: -20px;
}
.decor-2{
    position: absolute;
    width: 150px;
    inset-inline-start: 15%;
    bottom: -20px;
}

@media screen and (max-width:991px) {
  .archive-carousel{
    padding:  20px 20px !important;
}
.archive-carousel .flickity-viewport{
   height: 200px !important
}
.carousel-cell-archive{
    width: 35% !important;
    height: 150px;
}
.carousel-cell.carousel-cell-archive.is-selected {
    height: 180px !important;
    z-index: 2;
}
.archive-container{
    padding:  40px 20px;
}

.decor-2{
    inset-inline-start: 10% !important;
}
}