yteersd

@media (max-width: 768px) {
--size-height: 54px;
}
}

* {
box-sizing: border-box;
}

a {
text-decoration: none;
color: white;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap');

html {
font-size: 1vw;
@media (max-width: 768px) {
font-size: 1.6vw;
}
}

body {
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
background-color: var(--color-grey);
color: #fff;
font-size: 3rem;
line-height: 1;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}

.container {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.box {
cursor: pointer;
position: relative;
display: inline-block;
box-sizing: border-box;
width: 30vw;
padding-bottom: 30vw;
margin: 1vw;
background-color: #7f72d2;
background-color: var(--color-yellow);
text-transform: uppercase;
font-weight: 800;
overflow: hidden;
@media (max-width: 768px) {
width: 46vw;
padding-bottom: 46vw;
}
&:hover {
.box__btn {
background-color: var(--color-yellow);
color: var(--color-black);
}
.box__background {
animation-play-state: paused;
}
}

&__title {
transition: all var(--time-s);
transform: scale(1) translateY(0);
}

&__btn {
line-height: 4vw;
text-align: center;
max-width: 80%;
padding: 0 2vw;
font-size: 1.8rem;
margin-top: 1vw;
transition: all var(--time-s);
transform: scale(1);
background-color: var(--color-black);
color: var(--color-white);
border: 1px solid var(--color-black);
}

&__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}

&__content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 2vw;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
}

&__col {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
}

&__text-line {
position: absolute;
font-size: 1.5rem;
text-align: center;
left: 3vw;
right: 50%;

&--top {
top: 0;
}

&--bottom {
bottom: 0;
}

span {
line-height: 3vw;
padding: 0 1.5vw;
background-color: var(--color-yellow);
}
}

&__text-svg {
transform-origin: 50% 50%;
animation: rotate normal infinite calc(var(--time-s) * 30) linear;

&--reverse {
animation: rotateReverse normal infinite calc(var(--time-s) * 50) linear;
}
}

&--1,
&--4 {
width: 60vw;

@media (max-width: 768px) {
width: 94vw;
padding-bottom: 46vw;
}
}

&--1 {
background-color: var(--color-white);
color: var(--color-black);

.box__background {
outline: 3vw solid var(--color-yellow);
outline-offset: -3vw;
height: 100%;

&:before {
content: "";
position: absolute;
border: 1px solid var(--color-black);
left: 1.5vw;
right: 1.5vw;
top: 1.5vw;
bottom: 1.5vw;
}
}

.box__content {
padding: 3vw;
}

.box__title {
text-align: center;
font-size: 5rem;

span {
display: block;
font-size: 4rem;
}
}

&:hover {}
}

&--2 {
font-size: 1.5rem;

.box__background {
top: -50%;
left: -50%;
width: 200%;
height: auto;
font-size: 24px;
}

.box__content {
color: var(--color-black);
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;

span {
display: block;
font-size: 8rem;
}
}
}

&--3 {
.box__background {
top: -20%;
left: -20%;
width: 140%;
height: auto;
font-size: 30px;
}

.box__content {
font-size: 1.5rem;
color: var(--color-white);
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;

span {
display: block;
font-size: 6rem;
}
}

.box__btn {
background-color: var(--color-white);
color: var(--color-black);
}
}

&--4 {
background-color: var(--color-black);
text-shadow:
-1px 0 0 var(--color-white),
0 -1px 0 var(--color-white),
1px 0 0 var(--color-white),
0 1px 0 var(--color-white);
color: #000;

span {
letter-spacing: 0.3vw;
animation: text var(--time) linear infinite running;

&:nth-child(2n+1) {
animation-delay: calc(var(--time) / 4);
}

&:nth-child(3n+2) {
animation-delay: calc(var(--time) / 2);
}
}

&:hover {
text-shadow:
-1px 0 0 var(--color-grey),
0 -1px 0 var(--color-grey),
1px 0 0 var(--color-grey),
0 1px 0 var(--color-grey);

span {
animation: none;
}

.box__title {
z-index: 2;
opacity: 1;
text-shadow:
-1px 0 0 var(--color-yellow),
0 -1px 0 var(--color-yellow),
1px 0 0 var(--color-yellow),
0 1px 0 var(--color-yellow);
transform: scale(1.6);
color: var(--color-yellow);

&--top {
transform: scale(1.6) translateY(-1vw);
}
}
}
}
}

.card {
position: relative;
font-size: 1.5rem;
color: var(--color-black);
border: 1px solid var(--color-black);
background-color: var(--color-grey);
margin: 3%;
height: 40%;
width: 88%;
display: flex;
flex-direction: column;
overflow: hidden;

&__top {
background-color: var(--color-black);
color: var(--color-white);
text-align: center;
line-height: 1.2;
}

&__title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 1;
transition: all var(--time-s);

span {
padding-right: 4%;
font-size: 3rem;
}
}

&__btn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
line-height: 1.2;
transition: all var(--time-s);
background-color: var(--color-yellow);
color: var(--color-black);
border-top: 1px solid var(--color-black);
text-align: center;
transform: translateY(100%);
}

&:hover {
.card__title {
transform: translateY(-1vw);

}

.card__btn {
transform: translateY(0);
}
}

}

@keyframes text {
0%,
19% {
color: var(--color-white);
}

20%,
100% {
color: var(--color-black);
}
}

@keyframes rotate {
to {
transform: rotate(360deg);
}
}