/* ADVERTISE */

.advertise {
  display: grid;
  grid-template-columns: repeat(3, calc(50% - 15px));
  grid-template-rows: repeat(3, calc(50% - 15px));
  grid-gap: 15px;
  margin-inline-start: 15px;
  padding-top: 15px;
}

    .advertise .ad {
        width: 100%;
        height: 100%;
        transition: 0.3s;
        overflow: hidden;
        box-shadow: 0px 0px 10px rgb(0,0,0);
        position: relative;
        border: 0.5px solid rgba(0,0,0,0);
        will-change: transform;
    }

.advertise .ad:hover {
  border: 0.5px solid #ff8126;
  box-shadow: 0px 0px 20px rgba(255,129,38,0.41);
  cursor: pointer;
}

    .advertise img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.3s;
        position: relative;
        will-change: transform;
        overflow-clip-margin: unset;

    }

.advertise .ad:hover img {
  transform: scale(1.03);
  transform-origin: center center;
  
}

.adinnershadow {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  box-shadow: inset 0px 0px 60px rgb(0,0,0);
  transition: 0.3s;
}

.advertise .ad:hover .adinnershadow {
  box-shadow: inset 0px 0px 60px rgba(0,0,0,0.33);
}

.ad .col {
    position: absolute;
    bottom: 0;
    margin-left: 5%;
    margin-right: 5%;
    text-shadow: 0px 0px 5px rgb(0,0,0), 0px 0px 5px rgb(0,0,0);
    pointer-events: none;
    font-size: calc(12px + 0.5vw);
    left: -5%;
    transition: 0.5s ease;
    width: 92%;
    opacity: 0;
    height: 33%;
    font-family: Rubik, sans-serif;
}

.advertise .ad:hover .col {
  left: 0;
  opacity: 1;
}

.ad .col h2 {
  font-size: 1.7em;
}

/* GRIDs */

:root {
  --h-small-ratio: 2.2;
  --v-big-ratio: 1.081;
  --h-singlepicture: 2.2;
}

/* ad-1h */

.ad-1h .ad:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    aspect-ratio: var(--h-singlepicture);
}
.ad-1h .ad:nth-child(2) {
    display: none;
}
.ad-1h .ad:nth-child(3) {
    display: none;
}
.ad-1h .ad:nth-child(4) {
    display: none;
}
/* ad-2v */

.ad-2v .ad:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    aspect-ratio: var(--v-big-ratio);
}
.ad-2v .ad:nth-child(2) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    aspect-ratio: var(--v-big-ratio);
}

.ad-2v .ad:nth-child(3) {
    display: none;
}

.ad-2v .ad:nth-child(4) {
    display: none;
}

/* ad-2h-1v */

.ad-2h-1v .ad:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  aspect-ratio: var(--h-small-ratio);
}

.ad-2h-1v .ad:nth-child(2) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
  aspect-ratio: var(--h-small-ratio);
}

.ad-2h-1v .ad:nth-child(3) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  aspect-ratio: var(--v-big-ratio);
}

.ad-2h-1v .ad:nth-child(4) {
  display: none;
}

/* ad-1v-2h */

.ad-1v-2h .ad:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  aspect-ratio: var(--v-big-ratio);
}

.ad-1v-2h .ad:nth-child(2) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  aspect-ratio: var(--h-small-ratio);
}

.ad-1v-2h .ad:nth-child(3) {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  aspect-ratio: var(--h-small-ratio);
}

.ad-1v-2h .ad:nth-child(4) {
  display: none;
}

/* ad-2h-2h */

.ad-2h-2h .ad:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  aspect-ratio: var(--h-small-ratio);
}

.ad-2h-2h .ad:nth-child(2) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
  aspect-ratio: var(--h-small-ratio);
}
.ad-2h-2h .ad:nth-child(3) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    aspect-ratio: var(--h-small-ratio);
}
.ad-2h-2h .ad:nth-child(4) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    aspect-ratio: var(--h-small-ratio);
}


/* RESPONSIVE */

@media (max-width: 750px) {
    .advertise {
        display: flex;
        flex-direction: column;
        margin-right: 5px;
        margin-inline-start: 5px;
    }
}

@media (max-width: 750px) {
  .ad .col {
    opacity: 1;
    left: 0%;
  }
}