@import url("global.css");

@import url("header.css");
@import url("footer.css");

main {
    display: flex;
    flex-direction: column;
    padding-block: 3rem;
}

@media (width >= 50em) {
    main {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        column-gap: 1rem;
        padding-block: 3.5rem 5.5rem;
    }
}

.article {
    margin-bottom: 5rem;

    & time {
        display: block;
        margin-bottom: 0.4em;
    }

    & h2 {
        margin-bottom: 1em;
    }

    & h3 {
        margin-block: 2.5em 0.5em;
    }

    & h4 {
        margin-block: 1.5em 1.5em;
        font-weight: bold;

    }

    & p + p {
        margin-top: 1.5em;
    }
}

@media (width >= 50em) {
    .article {
        grid-column: 1/5;
        margin-bottom: 0;
    }
}

.cover-photo {
    width: 100%;
    aspect-ratio: 16/5;
    margin-bottom: 0.5em;
    object-fit: cover;
}

@media (width >= 50em) {
    .cover-photo {
        grid-column: 1/7;
        margin-bottom: 3em;
    }
}

.bullet-points {
    margin-bottom: 1.5em;

    & li {
        display: flex;
        margin-left: 2.6em;
    }

    & li + li {
        margin-top: 0.7em; 
    }

    & li::before {
        content: "";
        display: inline-block;
        flex-shrink: 0;
        position: absolute;
        height: 1.6em;
        width: 1.6em;
        margin-left: -2.9em;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24"><path fill="%232c594e" d="M12.2,17.4l4.5-5.4l-4.3-5.4c-0.1-0.2-0.2-0.4-0.2-0.6c0-0.6,0.5-1,1-1c0.3,0,0.6,0.1,0.8,0.4l4.8,6c0.3,0.4,0.3,0.9,0,1.3l-5,6c0,0,0,0,0,0c-0.4,0.4-1,0.5-1.4,0.1C11.9,18.4,11.9,17.8,12.2,17.4z M5.4,18.8c0.4,0.4,1.1,0.3,1.4-0.1l5-6c0.3-0.4,0.3-0.9,0-1.3l-4.8-6C6.7,5.1,6.5,5,6.2,5c-0.6,0-1,0.4-1,1c0,0.2,0.1,0.5,0.2,0.6L9.7,12l-4.5,5.4C4.9,17.8,4.9,18.4,5.4,18.8z"/></svg>');
    } 
}

.slideshow {
    width: 100vw;
    margin-left: -1rem;
    margin-block: 3em;
    border-bottom: solid 4px var(--clr-yellow);

    .slideshow__caption {
        margin-block: 0.7em;
        margin-left: 1em;
    }
}

@media (width >= 50em) {
    .slideshow {
        position: relative;
        width: unset;
        margin-left: 0;

        .slideshow__caption {
            margin-block: 0.7em;
            margin-left: unset;
        }
    }
}

.slideshow__buttons {
    display: none;
}

@media (width >= 50em) {
    .slideshow__buttons {
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 0;
        bottom: 0;
    
        & button {
            padding: 1em;
            border: 0;
            background-color: var(--clr-yellow);
            cursor: pointer;
    
            & svg {
                height: 2.2em;
            }
        }
    
        & button + button {
            margin-top: 0.25em;
        }
    }
}

.keen-slider {
    aspect-ratio: 16 / 5;
    width: 100%;
}

.keen-slider__slide {
  display: flex;
}

.quote {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.3125em;
    margin-block: 2.5em;
    background: linear-gradient(to right, var(--clr-green-light) calc((100% - 0.3125rem) / 2), transparent 0);
}

.quote__inner-container {
    display: flex;
    flex-direction: column;
    grid-column: 2/7;

    & cite {
        align-self: flex-end;
    }

    & p {
        margin-block: 2em 0.8em;
        font-size: var(--fs-500);
        line-height: 1.4;
    }   
}

@media (width >= 50em) {
    .quote {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 1rem;
        margin-block: 3rem;
        background: linear-gradient(to right, var(--clr-green-light) calc((100% - 1em) / 2), transparent 0);
    }
    
    .quote__inner-container {
        grid-column: 2/5; 
    }
}

aside {
    display: flex;
    flex-direction: column;
    gap: 3em;
}

@media (width >= 50em) {
    aside {
        grid-column: 5/7;
    }
}

.card-header {
    font-family: var(--ff-heading);
    font-size: 3.25rem;
    font-weight: var(--fw-medium);
    color: var(--clr-green-light);
    line-height: 0.87;
    transform: translate(-0.06em);
}

@media (width >= 50em) {
    .card-header {
        font-size: clamp(2.8rem, 0.4000rem + 4.8000vw, 4rem); 
    }
}

.card {
    padding: 2em;
    background-color: var(--clr-green-light);
}

.card__picture {
    aspect-ratio: 3 / 2;
    width: 100%;
    object-fit: cover;
}

.card-title {
    margin-block: 1em 0.6em;
    color: var(--clr-ink);

    & .subtitle {
        display: block;
        margin-top: 0.4em;
        color: var(--clr-ink);
        font-family: var(--ff-body);
        font-weight: var(--fw-medium);
        font-size: var(--fs-400);
        line-height: 1.6;
    }
}

.card__list {
    & li {
        display: flex;
        align-items: center;
    }

    & li + li {
        margin-top: 0.7em; 
    }

    & li::before {
        content: "";
        display: inline-block;
        flex-shrink: 0;
        height: 1.6em;
        width: 1.6em;
        margin-top: 0.5em;
        margin-inline: 0.2em 1.2em;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0.3;
    }
    
    & a {
        margin-top: 0.5em;
    }
}

.phone-icon::before {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"> <path fill="%23000000" d="M17.4,22c2.5,0,4.6-2,4.6-4.5c0-0.3,0-0.5-0.1-0.8c0-0.2-0.1-0.5-0.2-0.7c-0.1-0.3-0.4-0.6-0.7-0.7l-6-1.4 c-0.3-0.1-0.7,0-0.9,0.3c-0.1,0.1-0.2,0.1-0.8,1.4c-2.2-1-3.9-2.7-4.9-4.9c1.2-0.6,1.2-0.6,1.4-0.8c0.2-0.2,0.3-0.6,0.3-0.9L8.7,3 C8.7,2.7,8.4,2.4,8.1,2.3C7.9,2.2,7.6,2.1,7.4,2.1C7.1,2,6.9,2,6.6,2C4.1,2,2,4.1,2,6.6C2,15.1,8.9,22,17.4,22z M6.6,4h0.3L8,8.6 L7.5,8.9c-0.9,0.5-1.5,0.8-1.2,1.6c1.2,3.4,3.8,6,7.2,7.2c0.8,0.3,1.2-0.3,1.6-1.2l0.3-0.5l4.6,1.1v0.3c0,1.4-1.2,2.6-2.6,2.6 C10,20,4,14,4,6.6C4,5.2,5.2,4,6.6,4z"/> </svg>');}
.clock-icon::before {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"> <path fill="%23000000" d="M12,22c5.5,0,10-4.5,10-10c0-5.5-4.5-10-10-10S2,6.5,2,12C2,17.5,6.5,22,12,22z M12,4c4.4,0,8,3.6,8,8 s-3.6,8-8,8s-8-3.6-8-8S7.6,4,12,4z M11,12V8c0-0.6,0.4-1,1-1s1,0.4,1,1v3h3c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1h-4 C11.4,13,11,12.6,11,12z"/></svg>');}
.image-icon::before {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"> <path fill="%23000000" d="M18,3H6C4.3,3,3,4.3,3,6v12c0,1.7,1.3,3,3,3h12c1.7,0,3-1.3,3-3V6C21,4.3,19.7,3,18,3z M19,18c0,0.6-0.4,1-1,1 H6.6l7-5.8c0.3-0.2,0.7-0.2,0.9,0L19,17V18z M19,14.4l-3.2-2.7c-1-0.8-2.5-0.8-3.5,0L5,17.7V6c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1 V14.4z"/> <circle fill="%23000000" cx="8" cy="8.5" r="1.5"/> </svg>');}
.file-icon::before {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"> <path fill="%23000000" d="M8,17c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1H9C8.4,18,8,17.6,8,17z M9,14h3c0.6,0,1-0.4,1-1 c0-0.6-0.4-1-1-1H9c-0.6,0-1,0.4-1,1C8,13.6,8.4,14,9,14z M4,19.5v-15c0,0,0,0,0,0C4,3.1,5.2,2,6.6,2h7c0.3,0,0.6,0.1,0.7,0.3l5.4,6 C19.9,8.5,20,8.8,20,9v10.5c0,0,0,0,0,0c0,1.4-1.2,2.5-2.6,2.5H6.6c0,0,0,0,0,0C5.2,22,4,20.9,4,19.5z M14,7.2C14,7.6,14.3,8,14.7,8 h2L14,5L14,7.2C14,7.2,14,7.2,14,7.2z M6,19.5C6,19.5,6,19.5,6,19.5C6,19.8,6.3,20,6.6,20h10.9c0,0,0,0,0,0c0.3,0,0.5-0.2,0.6-0.5 V10h-3.3C13.2,10,12,8.7,12,7.1V4H6.6c0,0,0,0,0,0C6.3,4,6,4.2,6,4.5V19.5z"/> </svg>');}
.extern-icon::before {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"> <path fill="%23000000" d="M3,18V6c0-1.7,1.3-3,3-3h6c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1H6C5.4,5,5,5.4,5,6v12c0,0.6,0.4,1,1,1h12 c0.6,0,1-0.4,1-1v-6c0-0.6,0.4-1,1-1s1,0.4,1,1v6c0,1.7-1.3,3-3,3H6C4.3,21,3,19.7,3,18z M16,5h1.6l-6.3,6.3c-0.4,0.4-0.4,1,0,1.4 c0,0,0,0,0,0c0.4,0.4,1,0.4,1.4,0c0,0,0,0,0,0L19,6.4V8c0,0.6,0.4,1,1,1s1-0.4,1-1V4c0-0.6-0.4-1-1-1h-4c-0.6,0-1,0.4-1,1 C15,4.6,15.4,5,16,5z"/> </svg>');}
.link-icon::before {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"> <path fill="%23000000" d="M9.3,14.7c-0.4-0.4-0.4-1,0-1.4l4-4c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4l-4,4c0,0,0,0,0,0 C10.3,15.1,9.7,15.1,9.3,14.7C9.3,14.7,9.3,14.7,9.3,14.7z M11.7,20.7c0.2-0.2,0.4-0.3,0.6-0.5l1.4-1.4c0.4-0.4,0.4-1,0-1.4 c-0.4-0.4-1-0.4-1.4,0L11,18.7c-1.5,1.5-3.9,1.7-5.6,0.4c-1.7-1.4-1.9-3.9-0.5-5.6c0.1-0.1,0.2-0.2,0.3-0.3l1.4-1.4 c0.4-0.4,0.4-1,0-1.4c0,0,0,0,0,0c-0.4-0.4-1-0.4-1.4,0c0,0,0,0,0,0l-1.3,1.3c-2.2,2.1-2.5,5.6-0.7,8.1C5.3,22.3,9.1,22.8,11.7,20.7 z M10.3,6.6c0.4,0.4,1,0.4,1.4,0c0,0,0,0,0,0L13,5.3c1.5-1.5,3.9-1.7,5.6-0.4c1.7,1.4,2,3.9,0.6,5.6c-0.1,0.1-0.2,0.2-0.3,0.3 l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4c0,0,0,0,0,0c0.4,0.4,1,0.4,1.4,0c0,0,0,0,0,0l1.4-1.4c2.4-2.4,2.3-6.2,0-8.6 c-0.2-0.2-0.4-0.3-0.6-0.5c-2.5-1.8-6-1.6-8.1,0.7L10.5,5C10,5.4,9.9,6,10.3,6.6C10.2,6.6,10.3,6.6,10.3,6.6z"/> </svg>');}