.container {
    font-family: "Public sans", sans-serif;
    position: relative;
    flex: 1 0 25%;
    will-change: flex;
    transition: flex 0.3s;
    color: #fff;
}

.container.active {
    flex: 1 0 50%;
}

.gradient {
    display: block;
    position: absolute;
    bottom: 0px;
    top: 50%;
    left: -1px;
    right: -1px;
    z-index: 10;
    background: linear-gradient(0deg, #080e1f 3rem, rgba(8, 14, 31, 0));
    will-change: top;
    transition: top 0.2s;
    pointer-events: none;
}
.container.active .gradient {
    top: 20%;
}

.description {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 650px;
    z-index: 20;
    text-align: center;
    pointer-events: none;
}
.container.active .description {
    bottom: 55px;
}
.heading {
    font-weight: 700;
    transition: all 0.4s ease-out;
}
.container.active .heading {
    animation: font-size 0.4s ease-out forwards;
}
.container .detail {
    width: 80%;
    margin: 10px auto 0px auto;
    opacity: 0;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.container.active .detail {
    opacity: 1;
    max-height: 150px;
}

.detail .p {
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.4s ease-in 0.09s;
}
.container.active .detail .p {
    opacity: 1;
    margin-bottom: 10px;
    animation: hide 0.4s ease-in forwards 0.09s;
}

@keyframes font-size {
    0% {
        font-size: 18px;
    }
    100% {
        font-size: 28px;
    }
}
@keyframes hide {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}