.box-list-subheadline {

    grid-column: 2 / span 12;

    text-align: center;

}



.box-list-headline {

    grid-column: 2 / span 12;

    text-align: center;

    margin: 0;

    margin-top: var(--s-sm);

}



.box-list-description {

    grid-column: 2 / span 12;

    max-width: min(100%, 75ch);

    margin-inline: auto;

    margin-top: var(--s-sm);

    text-align: center;

}



.box-list-list {

    grid-column: 4 / span 8;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--grid-gap);

    margin-top: var(--s-md);

}



.box-list-item {

    background-color: var(--white);

    padding: 4em 2em;

    transition: background-color .3s ease, color .3s ease;

    display: flex;

    flex-direction: column;

}



.box-list-buttons {

    grid-column: 2 / span 12;

    justify-self: center;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--s-sm);

    margin-top: var(--s-md);

}



.box-list-item-title {

    margin-bottom: var(--s-sm);

    margin-top: 0;

}



.box-list-item:hover {

    background-color: var(--black);

    color: var(--white);

}



.box-list-item-description {

    margin-top: auto;

}



.box-list .btn {

    width: 100%;

    text-align: center;

}



@media (max-width: 1199.98px) {

    .box-list-list {

        grid-column: 2 / span 12;

    }

}



@media (max-width: 767.98px) {

        .box-list-list {

        grid-template-columns: 1fr;

    }

}