@import url('../../main.css');

.years{
    display: flex;
    gap: clamp(1px, 1.95vw, 30px);
}

.year-cont{
    border-radius: var(--fs-border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    overflow-anchor: none;
}

.year-img{
    aspect-ratio: 7/10;
}

.year-desc{
    background: linear-gradient(180deg, rgba(146, 21, 69, 0.4) 0%, #0B172B 100%);
    backdrop-filter: blur(10px);
    padding: var(--fs-padding);
    gap:var(--fs-gap20);
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: var(--fs-border-radius);
    border-bottom-right-radius: var(--fs-border-radius);
}

.year-desc{
    text-align: center;
}

.info{
    display: flex;
    flex-direction: column;
    gap:var(--fs-gap10);
}

.year-status {
    display: flex;
    gap:var(--fs-gap10);
    align-self: center;
    justify-content: center;
    align-content: center;
}

.year-status p{
    font-family: 'Vag Rounded Next';
    font-weight: 700;
}

.yellow{
    color:#FFB147;
}

.green{
    color:#56CC64;
}

.status-icon{
    width: clamp(1px,1.625vw,25px);
    height: clamp(1px,1.625vw,25px);
}

.info-block {
    border: var(--fs-border2px) solid #921545;
    border-radius: var(--fs-border-radius);
    width: 100%;
    overflow: hidden;
    background-clip: padding-box;
    transform: translateZ(0);
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.info-block dt,
.info-block dd {
    padding: var(--fs-padding);
    text-align: center;
    margin: 0;
    border-bottom: var(--fs-border2px) solid #921545;
}

.info-block dt:nth-last-child(-n+2),
.info-block dd:nth-last-child(-n+2) {
    border-bottom: none;
}

.info-block dt {
    font-family: 'Vag Rounded Next';
    font-weight: 700;
    background-color: #921545;
    color: #fff;
}

.info-block dd {
    background-color: #1D162E;
}

.info-block .yellow {
    color: #FFB147;
}

.info-block .green {
    color: #56CC64;
}



@media(max-width:768px) {
    .years {
        flex-direction: column-reverse;
        gap: var(--fs-gap20);
    }

    .status-icon{
        width: clamp(1px,5.874vw,100px);
        height: clamp(1px,5.874vw,100px);
    }
}