/* Columns */

.wp-block-columns {
    display: flex;
    align-items: flex-start !important;
    position: relative;
    gap: var(--gap-16);
}

.wp-block-column {
    padding: 0;
    margin: 0;
    flex-grow: 1;
    position: relative;
}

.wp-block-column > *:last-child {
    margin-bottom: 0;
}

.wp-block-columns.are-vertically-aligned-center {
    align-items: center !important;
}

.wp-block-columns.are-vertically-aligned-bottom {
    align-items: flex-end !important;
}

/* Image */

.wp-block-image {
    position: relative;
    margin: 1.6rem 0;
}

.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

.wp-block-image.is-style-rounded img {
    border-radius: 100rem;
}

.wp-block-image .alignleft {
    float: left;
    max-width: 30%;
    margin-right: 3rem;
}

.wp-block-image .alignright {
    float: right;
    max-width: 30%;
    margin-left: 3rem;
}

/* Cover */

.wp-block-cover {
    margin: 4rem 0;
}

/* Media */

.wp-block-media-text {
    display: flex;
    flex-flow: row wrap;
    margin: 4rem 0;
}

.wp-block-media-text > * {
    width: 50%;
}

.wp-block-media-text .wp-block-media-text__content {
    padding: 0rem 5rem;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    order: 1;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    order: 2;
}

.wp-block-media-text .wp-block-media-text__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Gallery */

/* Group */

.wp-block-group {
    position: relative;
    margin: 0;
}

.wp-block-group > .wp-block-group__inner-container {
    position: relative;
    max-width: 196rem !important;
    padding: 0 2rem;
    margin: 0 auto;
}

/* Group Notice */

.wp-block-group.notice {
    padding: 0.8rem;
    margin: 3.2rem 0;
    border-radius: var(--corner-radius-small);
}

.wp-block-group.notice > .wp-block-group__inner-container {
    padding: 0 !important;
    margin: 0 !important;
}

.wp-block-group.notice > .wp-block-group__inner-container > *:first-child {
    margin-top: 0;
}

.wp-block-group.notice > .wp-block-group__inner-container > *:last-child {
    margin-bottom: 0;
}

.wp-block-group.notice h4 {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 0.8rem;
}

.wp-block-group.notice p {
    margin: 0.8rem 0;
}

.wp-block-group.notice.yellow {
    background-color: var(--yellow-light);
}

.wp-block-group.notice.yellow h4 {
    color: var(--yellow);
}

.wp-block-group.notice.red {
    background-color: var(--red-light);
}

.wp-block-group.notice.red h4 {
    color: var(--red);
}

.wp-block-group.notice.green {
    background-color: var(--green-light);
}

.wp-block-group.notice.green h4 {
    color: var(--green);
}

.wp-block-group.notice.blue {
    background-color: var(--blue-light);
}

.wp-block-group.notice.blue h4 {
    color: var(--blue);
}

/* Gallery */

.wp-block-gallery {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start !important;
    gap: var(--gap-16) !important;
}

.wp-block-gallery.columns-2 > figure {
    min-width: calc(50% - 0.8rem);
    flex-basis: calc(50% - 0.8rem);
}

/* Video */

.wp-block-embed {
    margin: 0;
}

.wp-block-video {
    margin: 0;
}

.wp-block-video video {
    width: 100%;
    height: auto;
}

/* Code */

.wp-block-code {
    margin: 1.6rem 0;
    background-color: var(--gray-light);
    border-radius: var(--corner-radius-small);
    padding: 0.8rem;
    display: flex;
    flex-flow: column;
    gap: 0.8rem;
    /*white-space: normal;*/
    word-break: break-all;
}

.wp-block-code code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wp-block-code a.copy-code {
    align-self: flex-end;
    font-family: var(--font-1);
    margin: 0 !important;
}

/* RESPONSIVE */

@media (max-width: 1300px) {
}

@media (max-width: 1200px) {
}

@media (max-width: 990px) {
}

@media (max-width: 750px) {
    .wp-block-columns {
        flex-wrap: wrap !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (max-width: 600px) {
}

@media (max-width: 400px) {
}
