/* General Container configuration */
[class*=col-container] {
    max-width: var(--max-page-width);
    padding: var(--content-padding);
    margin: auto;
}
section[class*=col-container]{
    max-width: unset;
    padding: 0;
}
/* container inside container */
[class*=col-container] [class*=col-container] {
    padding-inline: 0;
}
@media screen and (max-width: 1280px) {
    [class*=col-container] {
        padding: 0 50px;
    }
}

@media screen and (min-width: 834px) and (max-width: 1024px){
    [class*=col-container] [class*=col-container] {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 834px) {
    [class*=col-container] {
        padding: 0 30px;
    }
    .col-container-1-1 {
        padding: 0 30px;
    }
}
@media screen and (max-width: 600px) {
    [class*=col-container] {
        padding: 0 20px;
    }
}
[class*=col-container-fullwidth] {
    max-width: unset;
    padding: unset;
}
[class*=col-container-fullwidth] [class*=col-container] {
    padding: var(--content-padding);
}


/* 2 Columns */
.col-container-1-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
}
.col-container-1-1:has(.slick-slider) {
    grid-template-columns: repeat(2, calc(50% - 20px));
}

.col-container-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 40px;
}
.col-container-2-1:has(.slick-slider) {
    grid-template-columns: calc(66.666666% - (40px / 3 * 2)) calc(33.33333333% - (40px / 3));
}

.col-container-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 40px;
}
.col-container-1-2:has(.slick-slider) {
    grid-template-columns: calc(33.33333333% - (40px / 3)) calc(66.666666% - (40px / 3 * 2));
}

@media screen and (max-width: 768px) {
    .col-container-1-1,
    .col-container-2-1,
    .col-container-1-2 {
        grid-template-columns: repeat(1, 1fr);
    }
    .col-container-1-1:has(.slick-slider),
    .col-container-2-1:has(.slick-slider),
    .col-container-1-2:has(.slick-slider) {
        grid-template-columns: repeat(1, 100%);
    }
}


/* 3 Columns */
.col-container-1-1-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
}
.col-container-1-1-1:has(.slick-slider) {
    grid-template-columns: repeat(3, calc(33.33333333% - (40px / 1.5)));
}

@media screen and (max-width: 1280px) {
    .col-container-1-1-1 {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }
    .col-container-1-1-1:has(.slick-slider) {
        grid-template-columns: repeat(2, calc(50% - 20px));
        grid-gap: 40px;
    }
}
@media screen and (max-width: 880px) {
    .col-container-1-1-1 {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
    }
    .col-container-1-1-1:has(.slick-slider) {
        grid-template-columns: repeat(1, 100%);
    }
}

/* 4 Columns */
.col-container-1-1-1-1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 40px;
}
.col-container-1-1-1-1:has(.slick-slider) {
    grid-template-columns: repeat(4, calc(25% - 30px));
}

@media screen and (max-width: 1280px) {
    .col-container-1-1-1-1 {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }
    .col-container-1-1-1-1:has(.slick-slider) {
        grid-template-columns: repeat(2, calc(50% - 20px));
        grid-gap: 40px
    }
}
@media screen and (max-width: 768px) {
    .col-container-1-1-1-1 {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px;
    }
    .col-container-1-1-1-1:has(.slick-slider) {
        grid-template-columns: repeat(1, 100%);
    }
}


/* accordionItem container */
.accordionItem {
    container-type: inline-size;
}
.event-details .wrap {
    container-type: inline-size;
}
@container (max-inline-size: 865px) {
    .accordionItem:has(.whiteButton) .whiteButton {
        width: auto;
    }
    .event-details .wrap .whiteButton {
        width: auto;
    }
}
@container (max-inline-size: 768px) {
    .col-container-1-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .col-container-2-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .col-container-1-2 {
        grid-template-columns: repeat(1, 1fr);
    }
    .col-container-1-1-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .col-container-1-1-1-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .accordionItem:has(.whiteButton) .whiteButton {
        width: 400px;
    }
}
@container (max-inline-size: 400px) {
    .accordionItem:has(.whiteButton) .whiteButton {
        width: auto;
    }
}

/* frame layouts */
section.padding-inner-10 div[class*='col-container-']{
    padding: 10px 20px;
}
section.padding-inner-20 div[class*='col-container-']{
    padding: 20px 20px;
}
section.padding-inner-30 div[class*='col-container-']{
    padding: 30px 20px;
}
section.padding-inner-40 div[class*='col-container-']{
    padding: 40px 20px;
}
section.padding-inner-50 div[class*='col-container-']{
    padding: 50px 20px;
}
section.padding-inner-60 div[class*='col-container-']{
    padding: 60px 20px;
}
section.padding-inner-70 div[class*='col-container-']{
    padding: 70px 20px;
}
section.padding-inner-80 div[class*='col-container-']{
    padding: 80px 20px;
}
section.padding-inner-90 div[class*='col-container-']{
    padding: 90px 20px;
}
section.padding-inner-100 div[class*='col-container-']{
    padding: 100px 20px;
}

@media screen and (max-width: 1280px){
    section.padding-inner-10 div[class*='col-container-'],
    section.padding-inner-20 div[class*='col-container-'],
    section.padding-inner-30 div[class*='col-container-'],
    section.padding-inner-40 div[class*='col-container-'],
    section.padding-inner-50 div[class*='col-container-'],
    section.padding-inner-60 div[class*='col-container-'],
    section.padding-inner-70 div[class*='col-container-'],
    section.padding-inner-80 div[class*='col-container-'],
    section.padding-inner-90 div[class*='col-container-'],
    section.padding-inner-100 div[class*='col-container-']{
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media screen and (max-width: 834px){
    section.padding-inner-10 div[class*='col-container-'],
    section.padding-inner-20 div[class*='col-container-'],
    section.padding-inner-30 div[class*='col-container-'],
    section.padding-inner-40 div[class*='col-container-'],
    section.padding-inner-50 div[class*='col-container-'],
    section.padding-inner-60 div[class*='col-container-'],
    section.padding-inner-70 div[class*='col-container-'],
    section.padding-inner-80 div[class*='col-container-'],
    section.padding-inner-90 div[class*='col-container-'],
    section.padding-inner-100 div[class*='col-container-']{
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media screen and (max-width: 600px){
    section.padding-inner-10 div[class*='col-container-'],
    section.padding-inner-20 div[class*='col-container-'],
    section.padding-inner-30 div[class*='col-container-'],
    section.padding-inner-40 div[class*='col-container-'],
    section.padding-inner-50 div[class*='col-container-'],
    section.padding-inner-60 div[class*='col-container-'],
    section.padding-inner-70 div[class*='col-container-'],
    section.padding-inner-80 div[class*='col-container-'],
    section.padding-inner-90 div[class*='col-container-'],
    section.padding-inner-100 div[class*='col-container-']{
        padding-left: 20px;
        padding-right: 20px;
    }
}