@media only screen and (min-width: 320px) {

    /* ------------------------ */
    /* --- Appointment Form --- */
    /* ------------------------ */
    #appointmentFrm {
        grid-column: 1 / -1;
    }
    #wrp-tab {
        grid-column: 1 / -1;
    }
    #wrp-tab .tabpanel {
        display: grid;
        grid-column-gap: 6px;
        grid-row-gap: 0;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;

        position: relative;
    }
    #wrp-tab .tabpanel .headline-tab {
        grid-column: 1 / -1;
        text-align: center;
    }
    #wrp-tab .tabpanel .desc-tab {
        grid-column: 1 / -1;
        margin: 30px 0 40px 0;
        text-align: center;
    }
    #wrp-tab .tabpanel .desc-tab-note {
        grid-column: 1 / -1;
        margin: 30px 0 30px 0;
        text-align: center;
    }
    .wrp-cta_step2 {
        grid-column: 1 / -1;
    }
    #wrp-tab .tabpanel .desc-tab p:not(p.custom) {
        /* font-size: 20px; */
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
        line-height: 1.6;
        margin-bottom: 20px;
    }
    #wrp-tab .tabpanel .desc-tab h3 {
        /* font-size: 20px; */
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
        line-height: 1.6;
    }
    .choose_purpose {
        grid-column: 1 / -1;

        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        column-gap: 6px;
    }
    .choose_purpose li {
        width: calc(100% - 6px);
        cursor: pointer;
    }


    .wrp-purpose_img::after {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        padding-top: 128.04%;
    }
    .stores li,
    .wrp-store_in_country,
    .wrp-frm,
    .calendarSwiper {
        grid-column: 1 / -1;
    }
    .wrp-confirmed {
        grid-column: 1 / -1;
    }


    .back-step, .back-step:hover, .back-step:focus {
        font-size: 14px;
    }
    .wrp-frm__info {
        display: grid;
        grid-column-gap: 6px;
        grid-row-gap: 6px;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
    
        position: relative;
        overflow: hidden;
    }

    .form__group.g11 label {
        font-size: 14px;
        font-weight: 300;
        line-height: 1.6;
    }
    .form__group.g11 label a {
        font-size: 14px;
        line-height: 1.6;
        font-weight: 700;
    }

    .wrp-frm__info .g1 {
        grid-column: 1 / 3;
        margin-bottom: 15px;
    }
    .wrp-frm__info .g2 {
        grid-column: 3 / -1;
        margin-bottom: 15px;
    }
    .wrp-frm__info .g3 {
        grid-column: 1 / -1;
        margin-bottom: 15px;
    }

    .wrp-frm__info .g6 {
        grid-column: 1 / -1;
        margin-bottom: 15px;
    }
    .wrp-frm__info .g7 {
        grid-column: 1 / -1;
        margin-bottom: 15px;
    }

    .confirmed-info {
        display: grid;
        grid-column-gap: 6px;
        grid-row-gap: 6px;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        position: relative;
        overflow: hidden;
        margin: 40px 0;
    }

    .wrp-add__calendar {
        grid-column: 1 / -1;
        margin: 40px 0;
    }

}

@media only screen and (min-width: 320px) and (max-height: 568px) {

}

@media only screen and (min-width: 360px) {

}

@media only screen and (min-width: 360px) and (max-height: 640px) {

}

@media only screen and (min-width: 360px) and (max-height: 740px) {

}

@media only screen and (min-width: 360px) {

}

@media only screen and (min-width: 360px) and (max-height: 740px) {

}

@media only screen and (min-width: 375px) {
}

@media only screen and (min-width: 375px) and (max-height: 667px) {

}

@media only screen and (min-width: 375px) and (max-height: 812px) {

}

@media only screen and (min-width: 390px) {

}

@media only screen and (min-width: 390px) and (max-height: 844px) {

}

@media only screen and (min-width: 393px) {

}

@media only screen and (min-width: 412px) {

}

@media only screen and (min-width: 412px) and (max-height: 914px) {

}

@media only screen and (min-width: 412px) and (max-height: 915px) {

}

@media only screen and (min-width: 414px) and (max-height: 736px) {

}

@media only screen and (min-width: 414px) and (max-height: 896px) {

}

@media only screen and (min-width: 430px) {

}

@media only screen and (min-width: 430px) and (max-height: 932px) {

}

@media only screen and (min-width: 540px) {

    /* ------------------------ */
    /* --- Appointment Form --- */
    /* ------------------------ */
    #appointmentFrm {
        grid-column: 1 / -1;
    }
    #wrp-tab {
        grid-column: 1 / -1;
    }
    #wrp-tab .tabpanel {
        display: grid;
        grid-column-gap: 8px;
        grid-row-gap: 0;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;

        position: relative;
    }
    #wrp-tab .tabpanel .headline-tab {
        grid-column: 2 / 12;
        text-align: center;
    }
    #wrp-tab .tabpanel .desc-tab {
        grid-column: 3 / 11;
        margin: 30px 0 40px 0;
        text-align: center;
    }
    #wrp-tab .tabpanel .desc-tab-note {
        /* grid-column: 5 / 9; */
        grid-column: 3 / 11;
        margin: 30px 0 40px 0;
        text-align: center;
    }
    .wrp-cta_step2 {
        grid-column: 3 / 11;
    }
    #wrp-tab .tabpanel .desc-tab p:not(p.custom) {
        /* font-size: 20px; */
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
        line-height: 1.6;
        margin-bottom: 20px;
    }
    #wrp-tab .tabpanel .desc-tab h3 {
        /* font-size: 20px; */
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
        line-height: 1.6;
    }
    .choose_purpose {
        grid-column: 3 / 11;

        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        column-gap: 8px;
    }
    .choose_purpose li {
        width: calc(100% - 8px);
        cursor: pointer;
    }


    .wrp-purpose_img::after {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        padding-top: 66.67%;
    }
    .stores li {
        grid-column: auto / span 6;
    }
    .calendarSwiper {
        grid-column: 4 / 10;
    }
    .wrp-frm {
        grid-column: 1 / -1;
    }
    .wrp-confirmed {
        grid-column: 2 / 12;
    }



    .back-step, .back-step:hover, .back-step:focus {
        font-size: clamp(0.625rem, 0.5rem + 0.3125vw, 0.875rem);
    }
    .wrp-frm__info {
        display: grid;
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
    
        position: relative;
        overflow: hidden;
    }
    .wrp-frm__info .g1 {
        grid-column: 1 / 2;
        margin-bottom: 15px;
    }
    .wrp-frm__info .g2 {
        grid-column: 2 / 4;
        margin-bottom: 15px;
    }
    .wrp-frm__info .g3 {
        grid-column: 4 / -1;
        margin-bottom: 15px;
    }

    .wrp-frm__info .g6 {
        grid-column: 1 / 3;
        margin-bottom: 15px;
    }
    .wrp-frm__info .g7 {
        grid-column: 3 / -1;
        margin-bottom: 15px;
    }

    .confirmed-info {
        display: grid;
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        position: relative;
        overflow: hidden;
        margin: 70px 0;
    }

    .wrp-add__calendar {
        grid-column: 3 / 10;
        margin: 40px 0;
    }

}

@media only screen and (min-width: 768px) {

}

@media only screen and (min-width: 820px) {

}

@media only screen and (min-width: 992px) {

}

@media only screen and (min-width: 1024px) {

}

@media only screen and (min-width: 1280px) {

    /* ------------------------ */
    /* --- Appointment Form --- */
    /* ------------------------ */
    #appointmentFrm {
        grid-column: 1 / -1;
    }
    #wrp-tab {
        grid-column: 1 / -1;
    }
    #wrp-tab .tabpanel {
        display: grid;
        grid-column-gap: 8px;
        grid-row-gap: 0;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;

        position: relative;
    }
    #wrp-tab .tabpanel .headline-tab {
        grid-column: 4 / 10;
        text-align: center;
    }
    #wrp-tab .tabpanel .desc-tab {
        grid-column: 5 / 9;
        margin: 30px 0 50px 0;
        text-align: center;
    }
    #wrp-tab .tabpanel .desc-tab p:not(p.custom) {
        /* font-size: 20px; */
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
        font-weight: 300;
        line-height: 1.6;
        color: var(--black);
        margin-bottom: 20px;
    }
    #wrp-tab .tabpanel .desc-tab h3 {
        /* font-size: 20px; */
        font-size: clamp(1.125rem, 1.0625rem + 0.1563vw, 1.25rem);
        font-weight: 700;
        line-height: 1.6;
        color: var(--black);
    }
    .choose_purpose {
        grid-column: 3 / 11;

        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        column-gap: 8px;
    }
    .choose_purpose li {
        width: calc(100% - 8px);
        cursor: pointer;
    }


    .wrp-purpose_img::after {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        padding-top: 66.67%;
    }
    .stores li {
        grid-column: auto / span 3;
    }
    .wrp-store_in_country {
        grid-column: 5 / 9;
    }
    .calendarSwiper {
        grid-column: 5 / 9;
        width: 100%;
        margin-top: 60px;
    }
    .wrp-frm {
        grid-column: 4 / 10;
    }
    .wrp-confirmed {
        grid-column: 4 / 10;
        background-color: var(--white);
    }


    
    .form__group.g11 label {
        /* font-size: 14px; */
        font-size: clamp(0.625rem, 0.5rem + 0.3125vw, 0.875rem);
        font-weight: 300;
        line-height: 1.6;
    }
    .form__group.g11 label a {
        font-size: clamp(0.625rem, 0.5rem + 0.3125vw, 0.875rem);
        font-weight: 700;
        line-height: 1.6;
    }

    .confirmed-info {
        display: grid;
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        position: relative;
        overflow: hidden;
        margin: 70px 0;
    }
    .wrp-add__calendar {
        grid-column: 4 / 10;
        margin: 40px 0;
    }

}

@media only screen and (min-width: 1366px) {

}

@media only screen and (min-width: 1440px) {

}

@media only screen and (min-width: 1600px) {
    .single-card {
        min-width: 30vw;
        display: flex;
    }
}

@media only screen and (min-width: 1920px) {

}

@media only screen and (min-width: 2500px) {

}