.actions {
    display: block;
    background: var(--white);
    position: relative;
    left: -1vw;
    bottom: 0vh;
    width: 104vw;
    height: 105vh;
    overflow: hidden;
}

.actionContainer {
    position: relative;
    width: 100%;
    height: 20vh;
    top: -27vh;
    left: 0vw;
}

.actionTitleContainer {
    position: relative;
    left: 1.5vw;
    user-select: none;
}

.actionStar {
    position: relative;
    width: 20vmin;
    top: 25.7vh;
    left: 1.5vmin;
    aspect-ratio: 1 / 1;
    filter: brightness(0);
}

.actionSubtitle {
    font-family: var(--lightfont);
    text-transform: uppercase;
    font-size: 2.2vmin;
    color: var(--black);
    position: relative;
    left: 14vmin;
    top: 12.7vh;
}

.actionTitle {
    font-family: var(--mediumfont);
    text-transform: uppercase;
    font-size: 4vmin;
    color: var(--black);
    position: relative;
    left: 14vmin;
    top: 11.8vh;
}

.allActions {
    position: relative;
    width: 45vw;
    height: 72vh;
    top: 12vh;
    left: 2vw;
    display: grid;
    justify-content: left;
    align-items: center;
}

.actionBox {
    position: relative;
    width: 35vw;
    height: 14vh;
    top: 0vh;
    left: 2vw;
    background: var(--black);
    display: grid;
    cursor: pointer;
    text-align: left;
    padding: 1.5vmin;
    color: var(--white);
    clip-path: polygon(100% 0, 100% 50%, 85% 100%, 0 100%, 0 0);
    user-select: none;
}

.actionBoxTitle {
    font-family: var(--mediumfont);
    text-transform: uppercase;
    font-size: 2.5vmin;
    color: var(--yellow);
    user-select: text;
}

.actionBoxText {
    font-family: var(--regularfont);
    position: relative;
    bottom: 0vh;
    font-size: 1.8vmin;
    color: var(--white);
    letter-spacing: 1px;
    word-spacing: 1px;
    max-width: 85%;
    word-break: keep-all;
    user-select: text;
}

.actionHover{
    background: var(--yellow);
    color: var(--black);
}

.actionHover .actionBoxTitle, 
.actionHover .actionBoxText {
    color: var(--black);
}

.actionImages {
    position: absolute;
    width: 50vw;
    right: 6.5vw;
    top: 41vh;
    height: 72vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--black);
    clip-path: polygon(85% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
}

.actionImage {
    width: 70vmax;
    position: absolute;
    animation: slide 4s ease-in-out infinite;
}

.actionImage:nth-child(1) {
    z-index: 5;
}

.actionImage:nth-child(2) {
    z-index: 4;
}

.actionImage:nth-child(3) {
    z-index: 3;
}

.actionImage:nth-child(4) {
    z-index: 2;
}

.imageCounter {
    position: absolute;
    top: 1vh;
    left: 0vw;
    width: 10vw;
    height: 3.5vh;
    z-index: 10;
    display: flex;
    place-items: center;
    justify-content: center;
    gap: 1vw;
}

.actionBlock {
    position: relative;
    width: 1vw;
    height: 1vw;
    background: var(--black);
    outline: 1px solid var(--white-light);
    outline-offset: .4vmin;
    border-radius: 0.01vmin;
}

.actionBlockActive {
    background: var(--yellow);
}

.actionSocialMedia {
    position: relative;
    width: 100%;
    height: 10vh;
    right: 1.2vw;
    top: 14vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
}

.socialBlock {
    position: relative;
    width: 30vw;
    height: 6vi;
    background: var(--yellow);
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 2vmin;
    border-radius: 2vmin;
}

.socialImage {
    position: relative;
    width: 6vb;
    left: 1vw;
}

.socialBlock:hover {
    cursor: pointer;
    scale: 1.005
}

.socialTitle {
    font-family: var(--mediumfont);
    text-transform: uppercase;
    font-size: 4vmin;
    color: var(--white);
    position: relative;
    letter-spacing: 2px;
    left: 2vmin;
    bottom: 1.5vh;
}

.socialText {
    font-family: var(--lightfont);
    font-size: 2vmin;
    white-space: nowrap;
    color: var(--white);
    position: absolute;
    left: 10vmin;
    bottom: 2vh;
}


.red {
    background: var(--red);
}

.blue {
    background: var(--blue);
}

.black {
    background: var(--black);
}