* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    max-width: 100vw;
    overflow-x: hidden;
}

img {
    display: inline-block;
    max-width: 100%;
}

.header {
    background-color: #2f478f;
    display: flex;
}

.footer {
    display: flex;
    justify-content: center;
}

@font-face {
    font-family: "Amsterdam Three";
    src: url("./fonts/amsterdam-three.woff2") format("woff2");
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Raleway:wght@200;300;400&display=swap');

.destino {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.125rem;
    line-height: 1.6;

    .max-width {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .center {
        text-align: center;
    }

    .small {
        font-size: 0.875rem;
    }

    .normal {
        font-size: 1rem;
    }

    .big {
        font-size: 1.25rem;
    }

    .title,
    .subtitle {
        font-family: 'Raleway', sans-serif;
        text-transform: uppercase;
        line-height: 1.6;
        font-weight: 300;
        text-wrap: pretty;
    }

    .title {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 1.25rem;
    }

    .banner {
        background-color: #f9f5f2;
        padding-block: 4rem;
        color: #2c3e50;

        .container {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .head {
            font-family: "Amsterdam Three", sans-serif;
            font-size: 4rem;

            + .title {
                margin-top: 2rem;
            }
        }

        .title {
            letter-spacing: 0.25em;
        }
    }

    .text-image,
    .image-text {
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4rem;
            align-items: center;
        }

        p {
            &:not(:last-child) {
                margin-bottom: 1rem;
            }
        }

        .image {
            img {
                width: 100%;
            }
        }
    }

    .text-image {
        .text {
            grid-column: span 2;
        }
    }

    .image-text {
        .image {
            grid-column: span 2;
        }
    }

    .text-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .columns {
        .container {
            display: grid;
            gap: 2rem;

            &.columns-2 {
                grid-template-columns: repeat(2, 1fr);
            }

            &.columns-3 {
                grid-template-columns: repeat(3, 1fr);
            }

            &.columns-4 {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .column {
            display: flex;
            flex-direction: column;

            img {
                margin-bottom: .5rem;
            }
        }
    }

    .faqs {
        .faq-item {
            padding-block: 1rem;
            border-bottom: 1px solid #ccc;
        }

        .subtitle {
            cursor: pointer;

            &::marker {
                content: "";
            }
        }

        .answer {
            margin-top: 1rem;
        }
    }
}