.articleslide {
    display: flex;
    flex-direction: row;
}

.articletext {
    flex: 1;
    padding: 20px;
    font-size: 1.5rem;
    color: white;

    font-weight: normal;
}

.articletext h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    letter-spacing: .2rem;
    font-weight: normal;

    word-break: break-word;
}

.articletext h2 {
    font-size: 2rem;
    margin-bottom: 30px;

    font-weight: normal;
    color: #5C8374;
}

.articletext p {
    font-size: 1rem;
    margin-bottom: 20px;
}

.articletext.rightside {
    text-align: right;
}

.articletext.rightside p {
    text-align: justify;
}

.articletext a::before {
    content: ">> ";
    color: #5C8374;
}

.articletext a::after {
    content: " <<";
    color: #5C8374;
}

.articletext a {
    font-size: 1rem;
}

.articleimg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.articleimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.columnswrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2rem;
}

.contentcolumn {
    flex: 1 1 300px;
    min-width: 200px;
    max-width: 400px;

    position: relative;
    color: white;

    overflow: hidden;
} 

.contentcolumn h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    letter-spacing: .2rem;

    color: #5C8374;
}

.contentcolumn p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.contentcolumn iframe {
  transform-origin: top left;
  border: none;
}

@media (max-width: 600px) {
    .columnswrapper {
        flex-wrap: nowrap;
        overflow-x: scroll;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    .contentcolumn {
        min-width: 300px;

        scroll-snap-align: center;
    }

    .slide .contentcolumn {
        min-height: 100vh;
    }
}