.content .text,
.content .title {
    width: 66.6666%;
}

.content .title {
    margin: 0 0 3.2rem;
}

.content .list {
    margin: 5.5rem 0 0;
}

.content .list a {
    width: calc(50% - 2.6rem);
    margin: 0 0 3.3rem;
    display: block;
    overflow: hidden;
}

.content .list a,
.content .list a:after,
.content .list a:before {
    border-radius: 4.8rem;
}

.content .list a:after,
.content .list a:before {
    z-index: 30;

    top: calc(100% - 15rem);
    left: 0;
    width: calc(41.6666% - 5rem);
    height: 10rem;

    content: '';
    display: block;
    position: absolute;
    box-shadow: 0 5rem 0 0 var(--theme-background);

    border-right: 5rem solid transparent;
    border-bottom: 5rem solid transparent;
}

.content .list a:before {
    top: calc(100% - 24rem);
    left: 50%;
    width: calc(50% - 5rem);
    box-shadow: 5rem 5rem 0 0 var(--theme-background);
}

.content .list a .tag {
    left: 0;
    width: 41.6666%;
    height: 9.0rem;
    bottom: 0;
}

.content .list a .tag span {
    padding: 0.8rem 1.6rem;
    border-radius: 6.0rem;
}

.content .list a .name {
    width: 58.3333%;
    height: 9.0rem;
    padding: 0 5.0rem;

    right: 0;
    bottom: 0;

    border-radius: 4.8rem 0 0 0;
    background-color: var(--theme-background);

    transition: color 0.3s ease-out,
                font-weight 0.3s ease-out;
}

.content .list a .cover {
    aspect-ratio: 60 / 55;
}

.content .list a .hover {
    inset: 0;
    background: rgba(192,125,83, 0);
    transition: background 0.3s ease-out;
}

.content .list a .hover .circle {
    width: 12.0rem;
    height: 12.0rem;
    transform: scale(0) rotate(45deg);
    transition: transform 0.3s ease-out;
    border-radius: 50%;
}

.content .list a .hover .circle svg {
    width: 1.2rem;
}

.content .list a .hover .circle svg path { fill: white }


.content .list a:nth-child(even):after,
.content .list a:nth-child(even):before {
    top: auto;
    left: auto;
    right: 0;
    bottom: calc(100% - 15rem);

    box-shadow: 0 -5rem 0 0 var(--theme-background);
    border-top: 5rem solid transparent;
    border-left: 5rem solid transparent;

    border-right: 0;
    border-bottom: 0;
}

.content .list a:nth-child(even):before {
    top: auto;
    left: 0;
    bottom: calc(100% - 24rem);
    box-shadow: -5rem -5rem 0 0 var(--theme-background);
}

.content .list a:nth-child(even) .tag {
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
}

.content .list a:nth-child(even) .name {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;

    border-radius: 0 0 4.8rem 0;
}


@media (max-width: 1100px) {
    .content .text,
    .content .title {
        width: 100%;
    }

    .content .list a {
        width: calc(50% - 1.5rem);
    }

    .content .list a:before {
        left: 70%;
        width: calc(30% - 5rem);
    }

    .content .list a .tag {
        left: auto;
        width: auto;
        height: 9.0rem;
        bottom: auto;
        right: 20px;
    }

    .content .list a:nth-child(even) .tag {
        top: auto;
        left: 20px;
        right: auto;
        bottom: 0;
    }
}

@media (max-width: 767px) {
    .content .list a {
        width: 100%;
    }
}


.contact {
    background: white;
}

.contact:after,
.contact:before {
    top: 0;
    width: calc(50% - 35rem);
    height: 100%;

    content: '';
    display: block;
    position: absolute;

    background: url(../images/pattern-02.png);
    background-size: auto 64rem;
    background-repeat: repeat;
}

.contact:after { left: 0; background-position: right center }
.contact:before { right: 0; background-position: left center }

.contact .title {
    text-align: center;
    margin-bottom: 4.8rem;
}


@media (any-hover: hover) {
    .content .list a:hover .name {
        color: var(--theme-color-300);
        font-weight: 600;
    }

    .content .list a:hover .hover {
        background: rgba(192,125,83, 0.46);
    }

    .content .list a:hover .hover .circle {
        transform: scale(1) rotate(0deg);
    }
}