.markets-section {
  height: 30vh;
  width: 100%;
  background-image: url(../images/plane-4301615_1920.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.markets-hero-section {
  width: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  text-align: center;
}

.markets-hero-section h1 {
  color: var(--primary-color);
  text-shadow: 0 0 10px white;
  font-size: 3.5rem;
  text-align: center;
  position: relative;
  display: inline-block;
  padding-block: 30px;
}

.markets-hero-section h1::after {
  content: "";
  width: 50%;
  height: 4px;
  background-color: var(--secondary-color);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translatex(-50%);
}

main {
    margin-block: 60px;
}

h1 {
    text-align: center;
}

.market-section {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    gap: 10px;
    margin-inline: auto;
}

.plane-box {
    width: 600px;
    max-width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 10px;
}

.dash {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/dash\ 8.jpeg);
}

.agusta {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/agusta.jpg);
}

.f-5 {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/F-5.jpeg);
}

.fennec {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/fennec.jpeg);
}

.heuy {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/heuy.jpeg);
}

.fokker {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/fokker.jpeg);
}

.bombardier {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/bombardier-global-express-620463_1280.jpg);
}

.embraer{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/Embraer_Praetor_600_Paris_Air_Show_2019_Le_Bourget_SIAE0698.jpg);
}

.plane-name {
    position: absolute;
    bottom: 5%;
    right: 5%;
    padding: 5px 10px;
    background-color: black;
    color: var(--primary-color);
    text-transform: uppercase;
    box-shadow: 3px 3px 0 2px red;
    transform: skewy(-5deg);
    font-family: var(--headings-font);
    font-weight: 600;
}

/* === The sizes of the image boxes can be divided by two to get a 2 column 4 row === */

@media screen and (min-width: 1200px) and (max-width: 1356px) {
    .market-section {
        width: 100%;
        justify-content: center;
    }

    .plane-box {
        width: 500px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1119px) {

    .market-section {
        justify-content: center;
        width: 100%;
    }
    
    .plane-box {
        width: 40%;
    }
}

@media screen and (min-width: 500px) and (max-width: 1000px) {
    .market-section {
        margin-inline: auto;
        width: 100%;
    }
    .plane-box {
        width: 300px;
        height: 200px;
    }
}

@media screen and (max-width: 499px) {
    .market-section {
        width: 100%;
        justify-content: center;
    }
    .plane-box {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        height: 300px;
    }
}

@media screen and (max-width: 768px) {
    .markets-hero-section h1 {
        font-size: 2.6rem;
    }
}