* {
    block-size: border-box;
    box-sizing: border-box;
}

.print-only {
    display: none !important;
}

.print-only *{
    display: none !important;
}

* .print-only {
    display: none !important;
}

.print-only-inline {
    display: none !important;
}

.print-only-inline *{
    display: none !important;
}

* .print-only-inline {
    display: none !important;
}

.abvd-header {
    display: flex;
    padding: 2rem 3rem 0;
}

.abvd-header__left-item {
    min-width: fit-content;
    margin-right: 0.5rem;
    color: #314d9c;
    font-variant: all-small-caps;
    font-weight: bold;
    letter-spacing: 0;
    font-size: 1.5rem;
}

.abvd-header__line {
    width: 100%;
    height: 0.9rem;
}

.abvd-header__right-item {
    min-width: fit-content;
    margin-left: 0.5rem;
    font-variant: all-small-caps;
    font-weight: bold;
    letter-spacing: 0;
    font-size: 1.5rem;
}

.three-col-main {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 2rem;
    padding: 2rem;
}

.four-col-main {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 2rem;
    padding: 2rem;
}

.two-col-main {
    display: grid;
    /*grid-template-columns: auto;*/
    grid-template-columns: minmax(320px, 1fr);
    grid-gap: 2rem;
    padding: 2rem;
}

.two-col-step__number {
    font-size: 3rem;
    margin: 0 1rem;
}

.two-col-step__title {
    font-size: 2rem;
}

.two-col-step__img {
    width: 100%;
    height: auto;
}

.two-col-step__text {
    font-size: 1.75rem;
}

.two-col-step__num-bullets {
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-right: 2rem;
    font-size: 1.75rem;
}

.two-col-step__li-item {
    margin-bottom: 1rem;
}

.three-col-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.75rem;
    color: #6e768b;
    margin-top: 2rem;
}

.three-col-section__number {
    font-size: 3rem;
    font-weight: bold;
    place-self: flex-start;
}

.three-col-img {
    width: 80%;
    max-height: 700px;
}

.summary-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    padding: 3rem;
    color: #6e768b;
    letter-spacing: 0;
}

.summary-container h1 {
    grid-column: 1 / 4;
    letter-spacing: 0;
    font-variant: all-small-caps;
    display: inline;
    color: white;
    width: fit-content;
    padding: 0.1rem;
    margin-bottom: 0px;
    font-size: 3.5rem;
}

.summary-container h2 {
    grid-column: 1 / 4;
    margin-top: 0.1rem;
    margin-bottom: 2rem;
    font-variant: all-small-caps;
    letter-spacing: 0;
    font-size: 3.5rem;
}

.summary-container h3 {
    font-variant: all-small-caps;
    font-size: 2.5rem;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.summary-container p {
    font-size: 2rem;
}

.summary-badge {
    border: 2px solid;
    width: fit-content;
    padding: 0.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.summary-block__description{
    grid-column: 1 / 4;
}

.summary-block__good-practices{
    grid-column: 1 / 4;
}

.summary-block__good-practices ul{
    padding-left: 0;
}

.summary-block__good-practices li{
    font-size: 2rem;
}

.summary-block__materials{
    grid-column: 1 / 4;
}

.summary-block__goals{
    grid-column: 1 / 4;
}

.logo-footer {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.logo-footer img{
    width: 150px;
}

.steps-group__container--small {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.exercises__title {
    font-variant: all-small-caps;
    font-size: 2.5rem;
    text-decoration: underline;
    text-underline-offset: 5px;
    font-weight: bold;
    grid-column: 1 / end;
    margin-left: 3rem;
}

.section__number--circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 3rem;
    text-align: center;
    /*display: inline;*/
    margin: 1rem 1rem 1rem 0;
    vertical-align: middle;
}

.exercise__title {
    grid-column: 1 / end;
    display: flex;
    align-items: center;
    /*margin-bottom: 2rem;*/
    padding: 2rem;
    justify-content: center;
}

.step__title {
    font-size: 2.5rem;
    font-weight: bold;
}

.four-col-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.75rem;
    color: #6e768b;
    grid-column: 1 / end;
}

/* tablets */
@media only screen and (min-width: 481px) {
    .three-col-main {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 2rem;
        padding: 2rem;
    }
}

/* small screens */
@media only screen and (min-width: 769px) {
    .three-col-main {
        /*display: grid;*/
        /*grid-template-columns: auto auto;*/
        /*grid-gap: 2rem;*/
        padding: 2rem;
    }

    .four-col-main {
        grid-template-columns: auto auto;
    }

    .four-col-section {
        grid-column: auto;
    }

    .exercise__title {
        grid-column: 1 / 3;
        justify-content: center;
    }

}

/* large screens */
@media only screen and (min-width: 1025px) {
    .summary-container {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        column-gap: 3rem;
    }

    .summary-block__description{
        grid-column: 1 / 2;
    }

    .summary-block__good-practices{
        grid-column: 2 / 4;
    }

    .summary-block__materials{
        grid-column: 2 / 4;
    }

    .summary-block__goals{
        grid-column: 1 / 2;
    }

    .summary-container p {
        font-size: 1.5rem;
    }

    .summary-block__good-practices li{
        font-size: 1.5rem;
    }

    .summary-badge {
        font-size: 1.5rem;
    }

    .three-col-section {
        font-size: 1.5rem;
        max-width: 50%;
        flex: 1;
        margin: 0 1rem;
        justify-content: space-between;
    }

    .four-col-section {
        font-size: 1.5rem;
    }

    .three-col-row {
        display: flex;
        flex-wrap: wrap;
    }

    .three-col-row--last {
        display: flex;
        flex-wrap: wrap;
    }

    .three-col-main {
        display: inline-flex;
        flex-wrap: wrap;
    }

    .exercise__title {
        grid-column: 1 / 3;
        justify-content: flex-start;
    }

    .two-col-main {
        display: grid;
        /*grid-template-columns: auto;*/
        grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
        grid-gap: 2rem;
        padding: 2rem;
    }

    .two-col-step__text {
        font-size: 1.25rem;
    }

    .two-col-step__num-bullets {
        font-size: 1.25rem;
    }

    .two-col-step__title {
        font-size: 1.75rem;
    }

    .step__title {
        font-size: 1.75rem;
    }
}

/* extra large screens */
@media only screen and (min-width: 1201px) {
    .three-col-main {
        /*display: grid;*/
        /*grid-template-columns: auto auto auto;*/
        /*grid-gap: 2rem;*/
        display: flex;
        padding: 3rem;
        justify-content: space-around;
    }

    .three-col-section {
        font-size: 1.25rem;
    }

    .four-col-section {
        font-size: 1.25rem;
    }

    .summary-container {
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        padding: 4rem;
    }

    .summary-block__description{
        grid-column: 1 / 2;
    }

    .summary-block__good-practices{
        grid-column: 3 / 4;
        grid-row: 3 / span 4;
    }

    .summary-block__materials{
        grid-column: 2 / 3;
    }

    .summary-block__goals{
        grid-column: 2 / 3;
    }

    .summary-container p {
        font-size: 1.25rem;
    }

    .summary-block__good-practices li{
        font-size: 1.25rem;
    }

    .summary-badge {
        font-size: 1.25rem;
    }

    .summary-container h1 {
        font-size: 2.5rem;
    }

    .summary-container h2 {
        font-size: 2.5rem;
    }

    .summary-container h3 {
        font-size: 2rem;
    }

    .exercises__title {
        font-size: 2rem;
    }

    .step__title {
        font-size: 2rem;
    }

    .section__number--circle {
        width: 75px;
        height: 75px;
        line-height: 75px;
        border-radius: 50%;
        color: white;
        font-size: 3rem;
        text-align: center;
        /*display: inline;*/
        margin: 0.5rem;
        vertical-align: middle;
    }

    .four-col-main {
        grid-template-columns: auto auto auto;
    }

    .exercise__title {
        grid-column: 1 / end;
    }
}

/* extra extra large screens */
@media only screen and (min-width: 1600px) {
    .four-col-main {
        grid-template-columns: auto auto auto auto;
    }
}

@media print {

    /* With this we remove the date and the title of the page*/
    @page { size: auto;  margin: 0mm; }

    .print-only {
        display: block !important;
    }

    .print-only *{
        display: block !important;
    }

    * .print-only {
        display: block !important;
    }

    .print-only-inline {
        display: inline !important;
    }

    .print-only-inline *{
        display: inline !important;
    }

    * .print-only-inline {
        display: inline !important;
    }

    .three-col-main {
        display: block;
        grid-template-columns: auto auto auto;
        grid-gap: 2rem;
        padding: 2rem;
    }

    .three-col-section {
        font-size: 1rem;
        /*page-break-inside: avoid;*/
        /*page-break-before: auto;*/
        max-width: 250px;
        /*float: left;*/
        display: flex;
        margin: 4rem;
    }

    .three-col-img {
        max-height: 300px;
        page-break-inside: avoid;
        width: auto;
        max-width: 250px;
    }

    .four-col-section {
        font-size: 1.25rem;
    }

    .summary-container {
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-column-gap: 2rem;
        padding: 0 4rem 4rem;
        page-break-after: always;
    }

    .summary-block__description{
        grid-column: 1 / 2;
    }

    .summary-block__good-practices{
        grid-column: 3 / 4;
        grid-row: 3 / span 4;
    }

    .summary-block__materials{
        grid-column: 2 / 3;
    }

    .summary-block__goals{
        grid-column: 2 / 3;
    }

    .summary-container p {
        font-size: 1rem;
    }

    .summary-block__good-practices li{
        font-size: 1rem;
    }

    .summary-badge {
        font-size: 1rem;
    }

    .summary-container h1 {
        font-size: 2.5rem;
    }

    .summary-container h2 {
        font-size: 2.5rem;
        margin-bottom: 0;
    }

    .summary-container h3 {
        font-size: 2rem;
    }

    .exercises__title {
        font-size: 2rem;
    }

    .step__title {
        font-size: 2rem;
    }

    .section__number--circle {
        width: 75px;
        height: 75px;
        line-height: 75px;
        border-radius: 50%;
        color: white;
        font-size: 3rem;
        text-align: center;
        /*display: inline;*/
        margin: 0.5rem;
        vertical-align: middle;
    }

    .four-col-main {
        grid-template-columns: auto auto auto;
    }

    .exercise__title {
        grid-column: 1 / end;
    }

    .abvd-header {
        page-break-before: always;
        display: flex !important;
    }

    .three-col-row {
        page-break-after: always;
        /*clear: both;*/
        display: flex;
        justify-content: space-evenly;
        margin-top: 2rem;
    }

    .three-col-row--last {
        page-break-after: avoid;
        display: flex;
        justify-content: space-evenly;
    }
}