.h15 {margin-bottom: 15px;}
.h30 {margin-bottom: 30px;} 
.h40 {margin-bottom: 40px;}
picture img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 -webkit-transition: all 0.3s ease-out;
}
picture img:hover {
  opacity: 0.7;
}
.container-fish {
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 60px;
    margin-right: auto;
    margin-left: auto;
}
.header-wrapper img {
    width: auto;
    height: 100%;
}
.calc-u3 {
    color: #c44767;
    font-weight: 900;
}
.fish {
    padding-right: 40%;
} 
.fish  h1 {
    font-size: 36px;
    line-height: 1.22em;
    color: #c44767;
    font-weight: 900;
}
.fish  p {
    font-size: 20px;
    line-height: 1.22em;
    color: #898989;
    font-weight: 600;
}
.t30 {margin-top: 30px;} 


@media (min-width: 360px) and (max-width: 679px) {
.container-fish { width: 98%;}
.parent { display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(15, 1fr);
grid-column-gap: 0px;
grid-row-gap: 5px;}
.dv1 { grid-area: 1 / 1 / 2 / 2; }
.dv2 { grid-area: 2 / 1 / 3 / 2; }
.dv3 { grid-area: 3 / 1 / 4 / 2; }
.dv4 { grid-area: 4 / 1 / 5 / 2; }
.dv5 { grid-area: 5 / 1 / 6 / 2; }
.dv6 { grid-area: 6 / 1 / 7 / 2; }
.dv7 { grid-area: 7 / 1 / 8 / 2; }
.dv8 { grid-area: 8 / 1 / 9 / 2; }
.dv9 { grid-area: 9 / 1 / 10 / 2; }
.dv10 { grid-area: 10 / 1 / 11 / 2; }
.dv11 { grid-area: 11 / 1 / 12 / 2; }
.dv12 { grid-area: 12 / 1 / 13 / 2; }
.dv13 { grid-area: 13 / 1 / 14 / 2; }
.dv14 { grid-area: 14 / 1 / 15 / 2; }
.dv15 { grid-area: 15 / 1 / 16 / 2; }
.dv16 { grid-area: 16 / 1 / 17 / 2; }
.dv17 { grid-area: 17 / 1 / 18 / 2; }

.container-fish {
    padding-right: 5px;
    padding-left: 5px;
}
.fish {
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 30px;
} 
.h40 {margin-bottom: 0px;}
}


@media (min-width: 680px) and (max-width: 991px) {
.container-fish { width: 98%;}
.parent { display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;}
.dv1 { grid-area: 1 / 1 / 2 / 3; }
.dv2 { grid-area: 2 / 1 / 3 / 2; }
.dv3 { grid-area: 2 / 2 / 3 / 3; }
.dv4 { grid-area: 3 / 1 / 4 / 2; }
.dv5 { grid-area: 3 / 2 / 4 / 3; }
.dv6 { grid-area: 4 / 1 / 6 / 3; }
.dv7 { grid-area: 6 / 1 / 7 / 2; }
.dv8 { grid-area: 6 / 2 / 7 / 3; }
.dv9 { grid-area: 7 / 1 / 8 / 3; }
.dv10 { grid-area: 8 / 1 / 9 / 2; }
.dv11 { grid-area: 8 / 2 / 9 / 3; }
.dv12 { grid-area: 9 / 1 / 10 / 2; }
.dv13 { grid-area: 10 / 1 / 11 / 3; }
.dv14 { grid-area: 9 / 2 / 10 / 3; }
.dv15 { grid-area: 11 / 1 / 12 / 2; }
.dv16 { grid-area: 11 / 2 / 12 / 3; }
.dv17 { grid-area: 12 / 1 / 13 / 3; }
  
}

@media screen and (min-width: 992px) {
.container-fish {
  --c: min(96%, 1330px);  
  --p: calc(var(--c) - 30px);
  --a: 0.0077; 
  --g: calc(var(--p)*var(--a));
  --gg: calc(var(--g)/1.5); 
  --k: 2.0645;
  --ww: calc(2 - 2*var(--a));
  --hh: calc(1 - 3*var(--a));
  --ar: calc(var(--ww)/var(--hh));
  --ar-value: var(--ar)/1;  
  width: var(--c)
}
.parent-f {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-column-gap: var(--g);
grid-row-gap: var(--gg);}
.dv1 { grid-area: 1 / 1 / 2 / 3; }
.dv2 { grid-area: 1 / 3 / 2 / 4; }
.dv3 { grid-area: 1 / 4 / 2 / 5; }
.dv4 { grid-area: 2 / 1 / 3 / 2; }
.dv5 { grid-area: 2 / 2 / 3 / 3; }
.dv6 { grid-area: 2 / 3 / 4 / 5; }
.dv7 { grid-area: 3 / 1 / 4 / 2; }
.dv8 { grid-area: 3 / 2 / 4 / 3; }
.dv9 { grid-area: 4 / 1 / 5 / 3; }
.dv10 { grid-area: 4 / 3 / 5 / 4; }
.dv11 { grid-area: 4 / 4 / 5 / 5; }
.dv12 { grid-area: 5 / 1 / 6 / 2; }
.dv13 { grid-area: 5 / 2 / 6 / 4; }
.dv14 { grid-area: 5 / 4 / 6 / 5; }
.dv15 { grid-area: 6 / 1 / 7 / 2; }
.dv16 { grid-area: 6 / 2 / 7 / 3; }
.dv17 { grid-area: 6 / 3 / 7 / 5; }

.it21  { 
  aspect-ratio: var(--ar-value);
}
}